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の修正

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

さいごに

フォロー

アプリ情報