はじめに
こんにちは、onoです。
前回、Shrineを使って画像をアップロードする方法を紹介しました。
今回は、アップロード時に画像を加工する方法を紹介します。
アップロードする画像のリサイズ
Gemを追加
Gemfileに下記のGemを追加します。
（HomeBrewなどで事前にimagemagickをインストールしておいてください）
1 2 | gem 'image_processing' gem 'mini_magick', '>=4.3.5' |
Uploaderの修正
Uploaderに画像リサイズの処理を追加します。
1 2 3 4 5 6 7 8 9 10 | 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のプラグインを追加し、リサイズ処理を修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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で取得できます。
1 2 3 4 5 6 | <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フォーマットの画像のみ受け付けるようにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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 |
インサートされるレコード
フォームから画像をアップロードして保存すると、下記のようなレコードがインサートされます。
1 2 3 4 5 | +----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+ | 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へのダイレクトアップロードを調べていきます。
[…] Shrineでアップロードする際に画像を加工する […]