CarrierWave integráció

ha támogatja a képek dinamikus feltöltését a Ruby on Rails alkalmazásban, akkor a képek valószínűleg egy bizonyos modell entitáshoz vannak csatolva. A Rails alapértelmezés szerint az ActiveRecord-ot használja a modell entitásokhoz, míg a Mongoid dokumentumokat MongoDB-alapú modellekhez használják. Ilyen lehet például a kép megtartása egy Post entitás ‘ kép ‘attribútumaként vagy egy felhasználói entitás’ profile_picture ‘ attribútumaként.

a CarrierWave gem hasznos lehet A képfeltöltések integrálásához a modellhez. Alapértelmezés szerint a CarrierWave a helyi merevlemezen tárolja a képeket, de további bővítmények is rendelkezésre állnak a képek tárolásához és manipulálásához.

a Cloudinary gem egy plugint biztosít a CarrierWave számára. Ezzel a plugin lehetővé teszi, hogy élvezze az előnyeit CarrierWave könnyen feltölteni a képeket a HTML űrlapok a modell, miközben a nagy előnyeit Cloudinary: feltöltött képek tárolják felhő, átalakult és manipulált a felhő, és automatikusan szállítják a CDN.

CarrierWave installation and setup

az opcionális integrációs modul használatához az ActiveRecord vagy Mongoid képek feltöltéséhez a CarrierWave használatával telepítse a CarrierWave drágakövet:

gem install carrierwave

sínek 3.X Gemfile:

gem 'carrierwave'gem 'cloudinary'

sínek 2.x környezet.rb

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

feltöltési példák

az alábbiakban bemutatunk egy rövid példát, amely bemutatja a Cloudinary használatát a CarrierWave segítségével a Rails projektben. Ebben a példában a Post model entitást használjuk, hogy támogassuk a kép csatolását az egyes bejegyzésekhez. A csatolt képeket a Post entitás ‘kép’ attribútuma (oszlopa) kezeli.

a kezdéshez először definiáljon egy CarrierWave uploader osztályt, és mondja meg neki, hogy használja a Cloudinary plugint. A részleteket lásd a CarrierWave dokumentációjában.

ebben a példában a feltöltött képet PNG-vé konvertáljuk, mielőtt a felhőben tárolnánk. A post_picture címkét is hozzárendeljük. Két további átalakítást határozunk meg, amelyek szükségesek a kép megjelenítéséhez az oldalunkon: ‘standard’ és ‘thumbnail’. Minden feltöltött képhez egy véletlenszerűen generált egyedi nyilvános azonosító jön létre, amelyet folyamatosan tárolnak a modellben.

a következő példában kifejezetten definiálunk egy public_id-t a ‘Post’ entitás ‘short_name’ attribútumának tartalma alapján.

a Post ‘picture’ attribútuma egyszerűen egy String (természetesen DB áttelepítési szkriptre van szükség). Az imént definiált ‘PictureUploader’ osztályba szereljük:

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

a Post szerkesztéshez szükséges HTML űrlapunkban hozzáadunk egy Fájlmezőt a kép feltöltéséhez, valamint egy rejtett ‘gyorsítótár’ mezőt az oldal újratöltésének és érvényesítési hibáinak támogatására a feltöltött kép elvesztése nélkül. Az alábbi példa a ‘HAML’ (természetesen pontosan ugyanezt teheti az ‘ERB használatával’):

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

vezérlőnkben a bejegyzés attribútumait a szokásos módon mentjük vagy frissítjük. Például:

post.update_attributes(params)

ezen a ponton a felhasználó által a szerverre feltöltött kép feltöltődik a Cloudinary-be, amely szintén hozzárendelte a megadott nyilvános azonosítót és címkét, majd átalakítja PNG-be. A nyilvános azonosítót a feltöltött kép verziójával együtt a Post entitás ‘kép’ attribútumában tároljuk. Vegye figyelembe, hogy alapértelmezés szerint a transzformációk nem generálódnak ezen a ponton; csak akkor jönnek létre, amikor a végfelhasználó először hozzáfér hozzájuk. Ez igaz, hacsak nem adja meg a ‘process :eager => true’ vagy egyszerűen ‘eager’ minden transzformációhoz.

mostantól használhatja a szabványos image_tag hívásokat a feltöltött képek és azok származtatott átalakításainak megjelenítésére, és a Cloudinary gem automatikusan létrehozza a helyes teljes URL-t az erőforrások eléréséhez:

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

egyéni és dinamikus transzformációk

Cloudinary plugin CarrierWave támogatja az összes szabványos CarrierWave átméretezés és vágás lehetőségeket. Ezenkívül alkalmazhat bármilyen, a Cloudinary által támogatott egyéni átalakítást a cloudinary_transformation módszerrel. A cloudinary_transformation meghívása a szokásos CarrierWave resize és crop metódusokkal együtt is elvégezhető. A következő feltöltő osztály egy gyakori példát mutat be az egyéni transzformációk használatára:

ezt tovább folytathatja, és láncolt transzformációkat alkalmazhat összetettebb eredmények elérése érdekében. Ezek az átalakítások alkalmazhatók bejövő átalakításként feltöltés közben, vagy a különböző verziók részeként, amelyeket lustán vagy lelkesen generálnak feltöltés közben. A következő feltöltő osztály tartalmazza az ilyen láncolt transzformációkat, amelyeket a transformation paraméter cloudinary_transformation módszerével alkalmaznak.

egyes weboldalak olyan grafikai tervezéssel rendelkeznek, amely arra kényszeríti őket, hogy ugyanazokat a képeket különböző dimenziókban jelenítsék meg. Formálisan meghatározó több feltöltő változat lehet egy szóváltás. Továbbra is használhatja a CarrierWave-et, és kihasználhatja a Cloudinary dinamikus transzformációit a kívánt transzformációk alkalmazásával a nézet felépítése közben. Bármely verzió dinamikusan generálható az Ön nézetéből, a CarrierWave verzióktól való függőség nélkül. Ehhez használja a full_public_id attribútumot a cl_image_tag értékkel, hogy felhőalapú transzformációs URL-eket készítsen a modellhez csatolt feltöltött képekhez.

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

egyéni koordináta-alapú kivágás

ha engedélyezi a felhasználók számára, hogy manuálisan válasszák ki a vágási területet, javasoljuk,hogy az X, y koordinátákat tartósan tartsa a modellben, hogy a jövőben lehetővé tegye a különböző kivágásokat az eredeti képen. A következő feltöltő osztály az egyéni koordinátákat a model objektum attribútumaiból tölti le. A példa custom_crop metódusa további Felhőstranszformációs paraméterek Hash-ját adja vissza.

ha csak a kép kivágott változatát szeretné tárolni, használhat bejövő átalakítást. Így az eredeti kép nem tárolódik a felhőben; csak a kivágott verzió. Ezután további átalakításokkal átméretezheti a kivágott képet. A következő példa magában az osztályban hívja meg a process :custom_crop értéket (a ‘verzió’ helyett), míg az egyéni koordinátákat átmeneti attribútumként tartják a modellen (a attr-vel definiálva, ahelyett, hogy tartósan tárolná őket).