このエントリーをはてなブックマークに追加

2016年12月20日火曜日

Railsで画像をアップロードする(carrierwave)

こんにちは、h_ono_222です。
今回はRailsで画像アップロードする処理を簡単にまとめます。

今回やること

  1. レコード生成時にファイルを指定してアップロードする
  2. 画像のファイル名を変更する
  3. アップロード時に画像を一定サイズ内に収める
  4. アップロード時にサムネイル画像を作成する
  5. 画像の保存先、一時保存先を変更する

下準備

まず、ImageMagickをインストールします(ImageMagickは画像のリサイズとサムネイル作成で使います)
brew install imagemagick

次に必要なGemを追加してbundle installします。
gem 'carrierwave'
gem 'rmagick'

1. レコード生成時にファイルを指定してアップロードする

まず、アップローダを作成します。
./bin/rails g uploader photo_uploader

次に画像用のカラム名とアップローダを関連付けます。
class user < ActiveRecord::Base
  mount_uploader :profile_image, PhotoUploader
end

画像追加フォームを追加します(レコードの保存に失敗した場合、profile_image_cacheにアップロードした画像情報が格納されます)
<%= form_for @uesr do |f| %>
  <%= f.file_field :profile_image %>
  <%= f.hidden_field :profile_image_cache %>
<% end %>

2. 画像のファイル名を変更する

PhotoUploaderに下記のメソッドを追加します。
def filename
  "#{Time.now.to_i}.jpg" if original_name
end

ファイル名を変更する際の注意点としては、submitしてからレコードが保存されてアップロードした画像がリネームされるまでに上記のfilenameメソッドが複数回呼ばれるため、
ファイル名にランダム文字列を含める場合レコードに保存されたファイル名と実際のファイル名が変わってしまいます。
そのため、一度インスタンス変数に格納するなど工夫する必要があります。

3. アップロード時に画像を一定サイズ内に収める

PhotoUploaderに下記の設定を追加します。
process :resize_to_limit => [300, 300]

この設定では、アスペクト比を保ったまた縮小されます。

4. アップロード時にサムネイル画像を作成する

PhotoUploaderに下記の設定を追加します。
version :thumb do
  process :resize_to_limit => [100, 100]
end

サムネイル画像へのアクセスは下記の通りです。
@user.profile_image.thumb.url

5. 画像の保存先、一時保存先を変更す

画像の保存先の変更は下記の通りです。
def store_dir
  "images/#{model.id}/profile"
end

サムネイルの保存先の変更は下記の通りです。
version :thumb do
  process :resize_to_limit => [100, 100]
  def store_dir
    "images/#{model.id}/profile"
  end
end

画像の一時保存先の変更は下記の通りです。
def cache_dir
  'images/tmp'
end

サムネイルも保存先の変更と同様にブロックの中に記述します。
version :thumb do
  process :resize_to_limit => [100, 100]
  def store_dir
    "images/#{model.id}/profile"
  end
  def cache_dir
    'images/tmp'
  end
end

0 件のコメント:

コメントを投稿