CarrierWave integration

om du stöder dynamiskt uppladdning av bilder i din Ruby on Rails-applikation är bilderna troligen kopplade till en viss modellenhet. Rails använder ActiveRecord för modellenheter som standard, medan Mongoid-dokument används för en MongoDB-baserad modell. Exempel kan vara att behålla bilden som attributet’ bild ’för en Post-enhet eller som attributet ’profile_picture’ för en Användarenhet.

CarrierWave gem kan vara användbar för att integrera bilduppladdningar med din modell. Som standard lagrar CarrierWave bilder på den lokala hårddisken, men det har också ytterligare plugins tillgängliga för bildlagring och manipulation.

Cloudinary gem tillhandahåller ett plugin för CarrierWave. Med hjälp av denna plugin kan du njuta av fördelarna med CarrierWave för att enkelt ladda upp bilder från HTML-formulär till din modell, medan du njuter av de stora fördelarna med Cloudinary: uppladdade bilder lagras i molnet, omvandlas och manipuleras i molnet, och levereras automatiskt via en CDN.

carrierwave installation och installation

för att använda den valfria integrationsmodulen för att ladda upp bilder med ActiveRecord eller Mongoid med CarrierWave, installera CarrierWave gem:

Kopiera till Urklipp
gem install carrierwave

skenor 3.X Gemfile:

Kopiera till Urklipp
gem 'carrierwave'gem 'cloudinary'

skenor 2.X miljö.RB

Kopiera till Urklipp
config.gem 'carrierwave', :version => '~> 0.4.10'config.gem 'cloudinary'

notera

CarrierWave gem bör laddas före Cloudinary gem.

Ladda upp exempel

nedan är ett kort exempel som visar att du använder Cloudinary med CarrierWave i ditt Rails-projekt. I det här exemplet använder vi Postmodellenheten för att stödja att bifoga en bild till varje inlägg. Bifogade bilder hanteras av attributet’ bild ’ (kolumn) för post-entiteten.

för att komma igång, definiera först en CarrierWave uploader-klass och berätta för den att använda Cloudinary-plugin. För mer information, se CarrierWave dokumentation.

i det här exemplet konverterar vi den uppladdade bilden till en PNG innan den lagras i molnet. Vi tilldelar det också taggen post_picture. Vi definierar ytterligare två transformationer som krävs för att visa bilden på vår webbplats: ’standard’ och ’miniatyrbild’. Ett slumpmässigt genererat unikt offentligt ID genereras för varje uppladdad bild och lagras ständigt i modellen.

i följande exempel definierar vi uttryckligen ett public_id baserat på innehållet i attributet ’short_name’ för ’Post’ – entiteten.

attributet ’bild’ för Post är helt enkelt en sträng (ett DB-migreringsskript behövs naturligtvis). Vi monterar den till klassen’ PictureUploader ’ som vi just har definierat:

Kopiera till Urklipp
class Post < ActiveRecord::Base ... mount_uploader :picture, PictureUploader ...end

i vårt HTML-formulär för efterredigering lägger vi till ett filfält för att ladda upp bilden och även ett dolt cache-fält för att stödja sidladdning och valideringsfel utan att förlora den uppladdade bilden. Exemplet nedan är i ’HAML’ (du kan naturligtvis göra exakt samma sak med ’ERB’):

Kopiera till Urklipp
= form_for(:post) do |post_form| = post_form.hidden_field(:picture_cache) = post_form.file_field(:picture)

i vår controller sparar eller uppdaterar vi inläggets attribut på vanligt sätt. Exempelvis:

Kopiera till Urklipp
post.update_attributes(params)

Obs!

om du laddar upp bilder från webbläsaren direkt till Cloudinary skickas en signerad identifierare till styrenheten istället för den faktiska bilddata. Cloudinary s CarrierWave plugin sömlöst hanterar direkta identifierare, verifierar signaturen, och uppdaterar modellen med en hänvisning till den uppladdade bilden.

vid denna tidpunkt laddas bilden upp av användaren till din server till Cloudinary, som också tilldelade det angivna offentliga ID och tagg och konverterar det till PNG. Det offentliga ID tillsammans med versionen av den uppladdade bilden lagras i attributet ’bild’ för vår Post-enhet. Observera att transformationerna som standard inte genereras vid denna tidpunkt; de genereras endast när en slutanvändare kommer åt dem för första gången. Detta är sant om du inte anger ’process :eager => true’ eller helt enkelt ’eager’ för varje omvandling.

nu kan du använda standard image_tag – samtal för att visa de uppladdade bilderna och deras härledda transformationer och Cloudinary gem genererar automatiskt rätt fullständig URL för åtkomst till dina resurser:

Kopiera till Urklipp
image_tag(post.picture_url, :alt => post.short_name)image_tag(post.picture_url(:thumbnail), :width => 50, :height => 50)

anpassade och dynamiska transformationer

Cloudinary plugin för CarrierWave stöder alla vanliga CarrierWave ändra storlek och beskära alternativ. Dessutom kan du tillämpa alla anpassade omvandlingar som stöds av Cloudinary med metoden cloudinary_transformation. Calling cloudinary_transformation kan också göras i kombination med standard CarrierWave ändra storlek och beskära metoder. Följande uppladdningsklass visar ett vanligt exempel på att använda anpassade transformationer:

du kan ta detta vidare och tillämpa kedjade transformationer för att uppnå mer komplexa resultat. Dessa transformationer kan tillämpas som en inkommande transformation under uppladdning eller som en del av de olika versionerna som genereras antingen lat eller ivrigt under uppladdning. Följande uppladdningsklass innehåller sådana kedjade transformationer som tillämpas med parametern transformation i metoden cloudinary_transformation.

vissa webbplatser har en grafisk design som tvingar dem att visa samma bilder i många olika dimensioner. Formellt definiera flera uploader versioner kan vara ett besvär. Du kan fortfarande använda CarrierWave och utnyttja Cloudinary dynamiska transformationer genom att tillämpa önskade transformationer samtidigt bygga vyn. Vilken version som helst kan genereras dynamiskt från din vy utan beroende av CarrierWave-versioner. För att uppnå detta, använd attributet full_public_id med cl_image_tag för att bygga molnbaserade transformationsadresser för de uppladdade bilderna som är kopplade till din modell.

Kopiera till Urklipp
cl_image_tag(post.picture.full_public_id, :format => "jpg", :width => 100, :height => 200, :crop => :crop, :x => 20, :y => 30, :radius => 10)

Anpassad koordinatbaserad beskärning

om du tillåter dina användare att manuellt välja beskärningsområdet rekommenderar vi att du behåller X, y-koordinaterna ständigt i modellen för att möjliggöra olika beskärningar på originalbilden i framtiden. Följande uppladdningsklass hämtar de anpassade koordinaterna från attributen för objektet model. Metoden custom_crop i det här exemplet returnerar en Hash med ytterligare Molninära transformationsparametrar som ska tillämpas.

om du bara vill lagra den beskurna versionen av bilden kan du använda en inkommande transformation. På så sätt lagras inte originalbilden i molnet; bara den beskurna versionen. Du kan sedan använda ytterligare transformationer för att ändra storlek på den beskurna bilden. Följande exempel anropar process :custom_crop i klassen själv (istället för i en ’version’) medan anpassade koordinater hålls som övergående attribut på modellen (definierad med attr istället för att lagra dem ihållande).