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

1 はじめに
2 アップロードする画像のリサイズ
- 2.1 Gemを追加
- 2.2 Uploaderの修正
3 サムネイルを作成する
- 3.1 Uploaderの修正
- 3.2 サムネイルを表示する
4 バリデーションの追加
- 4.1 Uploaderの修正
5 インサートされるレコード
6 さいごに

はじめに

こんにちは、onoです。

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

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

Gemを追加

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

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

1 2	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

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

サムネイルを作成する

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

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

サムネイルを表示する

作成したサムネイルの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>

<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

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

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

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

 +----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+ | 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 | +----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+

+----+---------+---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------------------+---------------------+

| 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へのダイレクトアップロードを調べていきます。

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

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

はじめに

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

Gemを追加

Uploaderの修正

サムネイルを作成する

Uploaderの修正

サムネイルを表示する

バリデーションの追加

Uploaderの修正

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

さいごに

フォロー

アプリ情報