Shrineでアップロードする際に画像を加工する

はじめに

こんにちは、onoです。

前回、Shrineを使って画像をアップロードする方法を紹介しました。
今回は、アップロード時に画像を加工する方法を紹介します。

アップロードする画像のリサイズ

Gemを追加

Gemfileに下記のGemを追加します。
（HomeBrewなどで事前にimagemagickをインストールしておいてください）

gem 'image_processing'
gem 'mini_magick', '>=4.3.5'

Uploaderの修正

Uploaderに画像リサイズの処理を追加します。

require 'image_processing/mini_magick'

class ImageUploader < Shrine
  include ImageProcessing::MiniMagick
  plugin :processing

  process(:store) do |io, context|
    resize_to_limit!(io.download, 400, 400) { |cmd| cmd.auto_orient }
  end
end

サムネイルを作成する

Uploaderの修正

versionsとdelete_rawのプラグインを追加し、リサイズ処理を修正します。

require 'image_processing/mini_magick'

class ImageUploader < Shrine
  include ImageProcessing::MiniMagick
  plugin :processing
  plugin :versions
  plugin :delete_raw

  process(:store) do |io, context|
    original = io.download

    size_400 = resize_to_limit!(original, 400, 400) { |cmd| cmd.auto_orient }
    size_100 = resize_to_limit(size_400, 100, 100)

    { original: io, large: size_400, thumb: size_100 }
  end
end

サムネイルを表示する

作成したサムネイルのurlはphoto.image[:thumb].urlで取得できます。

<p>
  <strong>Image data:</strong>
  <%= image_tag @photo.image[:original].url %>
  <%= image_tag @photo.image[:large].url %>
  <%= image_tag @photo.image[:thumb].url %>
</p>

バリデーションの追加

Uploaderの修正

validation_helpersのプラグインを追加し、バリデーションを追加します。
バリデーションの処理はAttacher.validateの中に記述していきます。

今回は5MB以下のpngとjpgフォーマットの画像のみ受け付けるようにします。

require 'image_processing/mini_magick'

class ImageUploader < Shrine
  include ImageProcessing::MiniMagick
  plugin :processing
  plugin :versions
  plugin :delete_raw
  plugin :validation_helpers

  process(:store) do |io, context|
    original = io.download

    size_400 = resize_to_limit!(original, 400, 400) { |cmd| cmd.auto_orient }
    size_100 = resize_to_limit(size_400, 100, 100)

    { original: io, large: size_400, thumb: size_100 }
  end

  Attacher.validate do
    validate_max_size 5 * 1024 * 1024, message: 'is too large (max is 5MB)'
    validate_mime_type_inclusion %w(image/jpeg image/png)
  end
end

インサートされるレコード

フォームから画像をアップロードして保存すると、下記のようなレコードがインサートされます。

+----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+
| id | name    | image_data                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | created_at          | updated_at          |
+----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+
| 10 | sample1 | {"original":{"id":"dc03b1c5f6e4e1b31b9b1127965ff0cd.png","storage":"store","metadata":{"filename":"apple_PNG12440.png","size":171500,"mime_type":"image/png"}},"large":{"id":"1bbaa854252e69d9ca2bfe1756ddfb67.png","storage":"store","metadata":{"filename":"shrine20170505-5880-n9v6c9.png","size":75576,"mime_type":"image/png"}},"thumb":{"id":"2ec6bbcf9aa42db6067900d271b731f4.png","storage":"store","metadata":{"filename":"shrine20170505-5880-n9v6c920170505-5880-12itf1n.png","size":9659,"mime_type":"image/png"}}} | 2017-05-05 11:32:55 | 2017-05-05 11:32:55 |
+----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+

さいごに

今後はバックグラウンド処理やS3へのダイレクトアップロードを調べていきます。