CarrierWave integration

als u het dynamisch uploaden van afbeeldingen in uw Ruby on Rails-toepassing ondersteunt, zijn de afbeeldingen waarschijnlijk gekoppeld aan een bepaalde model-entiteit. Rails gebruikt standaard ActiveRecord voor modelentiteiten, terwijl Mongoid-documenten worden gebruikt voor een MongoDB-gebaseerd model. Voorbeelden kunnen zijn het behouden van de afbeelding als het ‘picture’ attribuut van een Post-entiteit of als het ‘profile_picture’ attribuut van een gebruiker entiteit.

de CarrierWave gem kan nuttig zijn voor het integreren van image uploads met uw model. Standaard slaat CarrierWave afbeeldingen op de lokale harde schijf op, maar het heeft ook extra plug-ins beschikbaar voor het opslaan en bewerken van afbeeldingen.

Cloudinary gem biedt een plugin voor CarrierWave. Met behulp van deze plugin kunt u genieten van de voordelen van CarrierWave voor het eenvoudig uploaden van afbeeldingen van HTML-formulieren naar uw model, terwijl u geniet van de grote voordelen van Cloudinary: geüploade afbeeldingen worden opgeslagen in de cloud, getransformeerd en gemanipuleerd in de cloud, en automatisch geleverd via een CDN.

CarrierWave installatie en instellingen

om de optionele integratiemodule te gebruiken voor het uploaden van afbeeldingen met ActiveRecord of Mongoid met CarrierWave, installeert u de CarrierWave gem:

gem install carrierwave

Rails 3.X Gemfile:

gem 'carrierwave'gem 'cloudinary'

Rails 2.x omgeving.rb

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

Upload voorbeelden

Hieronder is een kort voorbeeld dat het gebruik van Cloudinary met CarrierWave in uw Rails project demonstreert. In dit voorbeeld gebruiken we de post model entiteit om het bevestigen van een afbeelding aan elke post te ondersteunen. Bijgevoegde afbeeldingen worden beheerd door het’ picture ‘ attribuut (kolom) van de post-entiteit.

om te beginnen, definieer eerst een CarrierWave uploader klasse en vertel het om de Cloudinary plugin te gebruiken. Voor details, zie de CarrierWave documentatie.

in dit voorbeeld converteren we de geüploade afbeelding naar een PNG voordat we deze in de cloud opslaan. We zullen het ook de post_picture tag toewijzen. We definiëren twee extra transformaties die nodig zijn voor het weergeven van de afbeelding in onze site: ‘standaard’ en ’thumbnail’. Een willekeurig gegenereerde unieke publieke ID wordt gegenereerd voor elke geüploade afbeelding en voortdurend opgeslagen in het model.

in het volgende voorbeeld definiëren we expliciet een public_id op basis van de inhoud van het attribuut ‘short_name’ van de ‘Post’ – entiteit.

het’ picture ‘ attribuut van Post is gewoon een String (een DB migration script is natuurlijk nodig). We monteren het aan de ‘PictureUploader’ klasse die we net hebben gedefinieerd:

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

In ons HTML-formulier voor postbewerking, voegen we een bestand veld voor het uploaden van de foto en ook een verborgen ‘cache’ veld voor het ondersteunen van pagina herladen en validatie fouten zonder verlies van de geüploade foto. Het voorbeeld hieronder staat in ‘HAML’ (je kunt natuurlijk precies hetzelfde doen met ‘ERB’):

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

In onze controller bewaren of updaten we de attributen van de post op de standaard manier. Bijvoorbeeld:

post.update_attributes(params)

op dit punt wordt de afbeelding die door de gebruiker naar uw server wordt geüpload naar Cloudinary, die ook de opgegeven publieke ID en tag toegewezen en converteert naar PNG. De publieke ID samen met de versie van de geüploade afbeelding worden opgeslagen in het attribuut ‘picture’ van onze Post-entiteit. Merk op dat de transformaties standaard niet worden gegenereerd op dit punt; ze worden alleen gegenereerd wanneer een eindgebruiker ze voor de eerste keer opent. Dit is waar tenzij u ‘process :eager => true’ of gewoon ‘eager’ opgeeft voor elke transformatie.

nu kunt u standaard image_tag oproepen gebruiken voor het weergeven van de geüploade afbeeldingen en hun afgeleide transformaties en de Cloudinary gem genereert automatisch de juiste volledige URL voor toegang tot uw bronnen:

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

aangepaste en dynamische transformaties

Cloudinary ‘ s plugin voor CarrierWave ondersteunt alle standaard CarrierWave resize en bijsnijden opties. Daarnaast kunt u elke aangepaste transformatie toepassen die wordt ondersteund door Cloudinary met behulp van de cloudinary_transformation methode. Het aanroepen van cloudinary_transformation kan ook worden gedaan in combinatie met de standaard CarrierWave resize en crop methoden. De volgende uploader klasse toont een algemeen voorbeeld van het gebruik van aangepaste transformaties:

u kunt dit verder gaan en getransformeerde transformaties toepassen om complexere resultaten te bereiken. Deze transformaties kunnen worden toegepast als een inkomende transformatie tijdens het uploaden of als onderdeel van de verschillende versies die lui of gretig worden gegenereerd tijdens het uploaden. De volgende uploaderklasse omvat dergelijke geketende transformaties die worden toegepast met behulp van de transformation parameter van de cloudinary_transformation methode.

sommige websites hebben een grafisch ontwerp dat hen dwingt om dezelfde afbeeldingen in veel verschillende dimensies weer te geven. Formeel definiëren van meerdere uploaderversies kan een gedoe zijn. U kunt nog steeds CarrierWave gebruiken en gebruik maken van dynamische transformaties Cloudinary ‘ s door het toepassen van de gewenste transformaties terwijl het bouwen van uw uitzicht. Elke versie kan dynamisch worden gegenereerd vanuit uw mening zonder afhankelijkheid van CarrierWave versies. Gebruik hiervoor het attribuut full_public_id met cl_image_tag om cloudgebaseerde transformatie-URL ‘ s te bouwen voor de geüploade afbeeldingen die aan uw model zijn gekoppeld.

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

Custom-coordinate-based bijsnijden

Als u uw gebruikers toestaat om handmatig het bijsnijden gebied te selecteren, raden we aan om de X,y coördinaten voortdurend in het model te houden om verschillende bijsnijden op de oorspronkelijke afbeelding in de toekomst mogelijk te maken. De volgende uploaderklasse haalt de aangepaste coördinaten op uit attributen van het model object. De custom_crop methode in dit voorbeeld geeft een Hash van extra Cloudinary transformatie parameters om toe te passen.

als u alleen de bijgesneden versie van de afbeelding wilt opslaan, kunt u een binnenkomende transformatie gebruiken. Op deze manier wordt de originele afbeelding niet opgeslagen in de cloud; alleen de bijgesneden versie. U kunt vervolgens verdere transformaties gebruiken om de grootte van de bijgesneden afbeelding te wijzigen. Het volgende voorbeeld roept process :custom_crop aan in de klasse zelf (in plaats van in een ‘versie’), terwijl de aangepaste coördinaten worden bewaard als transiënte attributen op het model (gedefinieerd met attr in plaats van ze voortdurend op te slaan).