캐리어웨이브 통합

루비 온 레일스 애플리케이션에서 동적으로 이미지 업로드를 지원하는 경우 이미지가 특정 모델 엔티티에 첨부될 수 있습니다. 레일즈는 기본적으로 모델 엔터티에 액티레코드를 사용하는 반면,몽고이드 문서는 몽고이드 기반 모델에 사용됩니다. 예를 들어 이미지를 게시물 엔터티의’그림’속성 또는 사용자 엔터티의’프로필_그림’속성으로 유지하는 것이 포함될 수 있습니다.

캐리어웨이브 젬은 이미지 업로드를 모델과 통합하는 데 유용할 수 있습니다. 기본적으로 캐리어 웨이브는 로컬 하드 드라이브에 이미지를 저장하지만 이미지 저장 및 조작에 사용할 수있는 추가 플러그인도 있습니다.

클라우드 젬은 캐리어웨이브에 대한 플러그인을 제공합니다. 업로드 된 이미지는 클라우드에 저장 변환 및 클라우드에서 조작하고,캐나다를 통해 자동으로 전달됩니다.

캐리어웨이브 설치 및 설정

액티어코드 또는 몽고이드가 포함된 이미지를 업로드하기 위한 선택적 통합 모듈을 사용하려면 캐리어웨이브를 설치합니다:

클립보드로 복사
gem install carrierwave

레일 3.엑스 젬파일:

클립보드로 복사
gem 'carrierwave'gem 'cloudinary'

레일 2.엑스 환경.클립보드로 복사

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

참고

반송파 젬은 구름 보석보다 먼저 로드해야 합니다.

업로드 예

다음은 레일 프로젝트에서 캐리어웨이브와 함께 클라우디넌을 사용하는 것을 보여주는 짧은 예입니다. 이 예제에서는 게시물 모델 엔터티를 사용하여 각 게시물에 이미지를 첨부하는 것을 지원합니다. 첨부 된 이미지는 포스트 엔티티의’그림’속성(열)에 의해 관리됩니다.

시작하려면 먼저 캐리어웨이브 업로더 클래스를 정의하고 클라우드 플러그인을 사용하라고 지시합니다. 자세한 내용은 캐리어웨이브 문서를 참조하십시오.

이 예제에서는 업로드된 이미지를 클라우드에 저장하기 전에 이미지로 변환합니다. 우리는 또한 그것을 할당 할 것이다post_picture태그. 우리는 우리의 사이트에 이미지를 표시하는 데 필요한 두 가지 추가 변환을 정의:’표준’과’썸네일’. 업로드된 각 이미지에 대해 임의로 생성된 고유 공개 아이디가 생성되고 모델에 지속적으로 저장됩니다.

다음 예제에서는’게시물’엔터티의’짧은 이름’속성의 내용을 기반으로 공개 _아이디를 명시적으로 정의합니다.

게시물의’그림’속성은 단순히 문자열입니다. 우리는 그것을 우리가 정의한’그림 업로드기’클래스에 마운트합니다:

클립보드로 복사
class Post < ActiveRecord::Base ... mount_uploader :picture, PictureUploader ...end

우리는 또한 업로드 된 사진을 잃지 않고 페이지 다시로드 및 유효성 검사 오류를 지원하기위한 숨겨진’캐시’필드를 추가 할 수 있습니다. 아래 예제는’햄’에 있습니다(물론’어브’를 사용하여 정확히 동일한 작업을 수행 할 수 있습니다’):

클립보드로 복사
= form_for(:post) do |post_form| = post_form.hidden_field(:picture_cache) = post_form.file_field(:picture)

우리의 컨트롤러에서,우리는 저장하거나 표준 방식으로 게시물의 속성을 업데이트합니다. 예를 들어:

클립보드로 복사
post.update_attributes(params)

참고

브라우저에서 이미지를 클라우드로 직접 업로드하는 경우 실제 이미지 데이터 대신 서명된 식별자가 컨트롤러로 전송됩니다. 이 플러그인은 직접 식별자를 원활하게 처리하고 서명을 확인하며 업로드 된 이미지를 참조하여 모델을 업데이트합니다.

이 시점에서 사용자가 서버에 업로드 한 이미지가 클라우디 넌에 업로드됩니다. 공개 아이디와 함께 업로드 된 이미지의 버전은 우리의 포스트 엔티티의’사진’속성에 저장됩니다. 기본적으로 변환은 이 시점에서 생성되지 않으며 최종 사용자가 처음으로 변환에 액세스할 때만 생성됩니다. 각 변환에 대해’프로세스:열망=>참’또는 단순히’열망’을 지정하지 않는 한 사실입니다.

이제 표준image_tag호출을 사용하여 업로드된 이미지 및 파생 변환을 표시할 수 있습니다.:

클립보드로 복사
image_tag(post.picture_url, :alt => post.short_name)image_tag(post.picture_url(:thumbnail), :width => 50, :height => 50)

사용자 정의 및 동적 변환

캐리어웨이브의 플러그인은 모든 표준 캐리어웨이브 크기 조정 및 자르기 옵션을 지원합니다. 또한cloudinary_transformation방법을 사용하여 클라우디너에서 지원하는 사용자 지정 변환을 적용할 수 있습니다. cloudinary_transformation호출은 표준 반송파 크기 조정 및 자르기 방법과 함께 수행 할 수도 있습니다. 다음 업로더 클래스는 사용자 지정 변환을 사용하는 일반적인 예를 보여 줍니다.

이러한 변환은 업로드하는 동안 들어오는 변환으로 적용되거나 업로드하는 동안 느리게 또는 열심히 생성되는 다른 버전의 일부로 적용될 수 있습니다. 다음 업로더 클래스에는cloudinary_transformation메서드의transformation매개 변수를 사용하여 적용된 이러한 체인 변환이 포함됩니다.

일부 웹 사이트에는 동일한 이미지를 다양한 차원으로 표시하도록 강제하는 그래픽 디자인이 있습니다. 공식적으로 여러 업 로더 버전을 정의하는 것은 번거 로움이 될 수 있습니다. 뷰를 작성하는 동안 원하는 변환을 적용하여 캐리어 웨이브를 사용하고 클라우디언의 동적 변환을 활용할 수 있습니다. 모든 버전은 캐리어웨이브 버전에 종속되지 않고 뷰에서 동적으로 생성될 수 있습니다. 이 작업을 수행하려면cl_image_tag이 포함된full_public_id속성을 사용하여 모델에 첨부된 업로드된 이미지에 대한 클라우드 기반 변환을 빌드합니다.

클립보드로 복사
cl_image_tag(post.picture.full_public_id, :format => "jpg", :width => 100, :height => 200, :crop => :crop, :x => 20, :y => 30, :radius => 10)

사용자 지정 좌표 기반 자르기

사용자가 수동으로 자르기 영역을 선택할 수 있도록 허용하는 경우 향후 원본 이미지에서 다른 자르기를 사용하려면 모델에서 엑스,와이 좌표를 지속적으로 유지하는 것이 좋습니다. 다음 업로더 클래스는model개체의 속성에서 사용자 지정 좌표를 가져옵니다. 이 예제의custom_crop메서드는 적용할 추가 클라우드 변환 매개 변수의 해시를 반환합니다.

자른 버전의 이미지만 저장하려면 들어오는 변환을 사용할 수 있습니다. 이렇게 하면 원본 이미지가 클라우드에 저장되지 않고 자른 버전만 저장됩니다. 그런 다음 추가 변환을 사용하여 자른 이미지의 크기를 조정할 수 있습니다. 다음 예제에서는 클래스 자체에서(‘버전’대신)process :custom_crop을 호출하고 사용자 지정 좌표는 모델에서 임시 속성으로 유지됩니다(지속적으로 저장하는 대신attr로 정의).