Integracja CarrierWave

jeśli obsługujesz dynamiczne przesyłanie obrazów w swojej aplikacji Ruby on Rails, obrazy są prawdopodobnie dołączone do określonej jednostki modelu. Rails domyślnie używa ActiveRecord dla jednostek modelu, podczas gdy dokumenty Mongoid są używane dla modelu opartego na MongoDB. Przykłady mogą obejmować zachowanie obrazu jako atrybutu „obraz” jednostki Post lub jako atrybutu „profile_picture” jednostki użytkownika.

klejnot CarrierWave może być przydatny do integracji przesyłania obrazów z modelem. Domyślnie CarrierWave przechowuje obrazy na lokalnym dysku twardym, ale ma również dodatkowe wtyczki dostępne do przechowywania i manipulacji obrazami.

cloudinary gem zapewnia wtyczkę dla CarrierWave. Korzystanie z tej wtyczki umożliwia korzystanie z zalet CarrierWave do łatwego przesyłania obrazów z formularzy HTML do modelu, jednocześnie ciesząc się wielkimi zaletami Cloudinary: przesłane obrazy są przechowywane w chmurze, przekształcane i manipulowane w chmurze i dostarczane automatycznie za pośrednictwem CDN.

instalacja i konfiguracja CarrierWave

aby użyć opcjonalnego modułu integracji do przesyłania obrazów za pomocą ActiveRecord lub Mongoid przy użyciu CarrierWave, zainstaluj klejnot CarrierWave:

gem install carrierwave

szyny 3.X Gemfile:

gem 'carrierwave'gem 'cloudinary'

szyny 2.środowisko X.rb

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

przykłady przesyłania

Poniżej znajduje się krótki przykład, który demonstruje użycie Cloudinary z CarrierWave w Twoim projekcie Rails. W tym przykładzie używamy encji modelu Post do obsługi dołączania obrazu do każdego posta. Załączone obrazy są zarządzane przez atrybut (kolumnę) „obraz” jednostki Post.

aby rozpocząć, najpierw zdefiniuj klasę CarrierWave uploader i powiedz jej, aby używała wtyczki Cloudinary. Szczegółowe informacje można znaleźć w dokumentacji CarrierWave.

w tym przykładzie przekonwertujemy przesłany obraz do formatu PNG przed zapisaniem go w chmurze. Przypiszemy mu również znacznik post_picture. Definiujemy dwie dodatkowe transformacje wymagane do wyświetlenia obrazu w naszej witrynie: 'standard’ oraz 'thumbnail’. Losowo generowany unikalny identyfikator publiczny jest generowany dla każdego przesłanego obrazu i stale przechowywany w modelu.

w poniższym przykładzie definiujemy jawnie public_id na podstawie zawartości atrybutu 'short_name’ encji 'Post’.

atrybut 'picture’ Post jest po prostu ciągiem znaków (potrzebny jest oczywiście skrypt migracji DB). Montujemy go do klasy’ PictureUploader’, którą właśnie zdefiniowaliśmy:

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

w naszym formularzu HTML do edycji postów dodajemy pole pliku do przesłania obrazu, a także ukryte pole „cache” do obsługi błędów ładowania strony i walidacji bez utraty przesłanego obrazu. Poniższy przykład znajduje się w 'HAML’ (możesz oczywiście zrobić dokładnie to samo używając 'ERB’):

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

w naszym kontrolerze zapisujemy lub aktualizujemy atrybuty posta w standardowy sposób. Na przykład:

post.update_attributes(params)

w tym momencie obraz przesłany przez użytkownika na serwer jest przesyłany do Cloudinary, który również przypisał określony publiczny identyfikator i tag i konwertuje go do PNG. Identyfikator publiczny wraz z wersją przesłanego obrazu są przechowywane w atrybucie „obraz” naszej jednostki Post. Zauważ, że domyślnie transformacje nie są generowane w tym momencie; są generowane tylko wtedy, gdy użytkownik końcowy uzyskuje do nich dostęp po raz pierwszy. Jest to prawda, chyba że określisz 'process :eager => true’ lub po prostu 'eager’ dla każdej transformacji.

teraz możesz używać standardowych wywołań image_tag do wyświetlania przesłanych obrazów i ich pochodnych przekształceń, a klejnot Cloudinary automatycznie generuje prawidłowy pełny adres URL dostępu do zasobów:

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

niestandardowe i dynamiczne transformacje

wtyczka Cloudinary dla CarrierWave obsługuje wszystkie standardowe opcje zmiany rozmiaru i przycinania CarrierWave. Ponadto możesz zastosować dowolną niestandardową transformację obsługiwaną przez Cloudinary za pomocą metody cloudinary_transformation. Wywołanie cloudinary_transformationmożna również wykonać w połączeniu ze standardowymi metodami CarrierWave resize i crop. Poniższa Klasa uploadera pokazuje typowy przykład użycia niestandardowych przekształceń:

możesz posunąć się dalej i zastosować łańcuchowe transformacje, aby uzyskać bardziej złożone wyniki. Transformacje te mogą być stosowane jako transformacja przychodząca podczas przesyłania lub jako część różnych wersji, które są generowane leniwie lub chętnie podczas przesyłania. Poniższa Klasa uploader zawiera takie łańcuchowe transformacje zastosowane przy użyciu parametru transformation metody cloudinary_transformation.

niektóre witryny mają projekt graficzny, który zmusza je do wyświetlania tych samych obrazów w wielu różnych wymiarach. Formalne zdefiniowanie wielu wersji uploadera może być kłopotliwe. Nadal możesz używać CarrierWave i wykorzystywać dynamiczne transformacje Cloudinary, stosując pożądane transformacje podczas budowania widoku. Każda wersja może być generowana dynamicznie z twojego widoku bez zależności od wersji CarrierWave. Aby to osiągnąć, użyj atrybutu full_public_id z cl_image_tag, aby utworzyć adresy URL transformacji w chmurze dla przesłanych obrazów dołączonych do modelu.

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

niestandardowe kadrowanie oparte na współrzędnych

jeśli użytkownicy mogą ręcznie wybrać obszar kadrowania, zalecamy utrzymywanie współrzędnych x i y w modelu,aby w przyszłości umożliwić różne kadrowanie na oryginalnym obrazie. Następująca Klasa uploader pobiera własne współrzędne z atrybutów obiektu model. Metoda custom_crop w tym przykładzie zwraca Hash dodatkowych parametrów transformacji Cloudinary do zastosowania.

jeśli chcesz przechowywać tylko przyciętą wersję obrazu, możesz użyć przychodzącej transformacji. W ten sposób oryginalny obraz nie jest przechowywany w chmurze; tylko przycięta wersja. Następnie można użyć dalszych przekształceń, aby zmienić rozmiar przyciętego obrazu. Poniższy przykład wywołuje process :custom_crop W samej klasie (zamiast w „wersji”), podczas gdy niestandardowe współrzędne są przechowywane jako atrybuty przejściowe w modelu (zdefiniowane jako attr zamiast przechowywać je na stałe).