Active Storageでアップロードする画像をimage_processingでリサイズする

Rails Gem

Active Storageを使った画像アップロード機能を実装中です。 MiniMagickを使った画像リサイズの情報はたくさん見つかったのですが、image_processing gemを使った情報はあまり多くない印象でした。 Rails6からimage_processing gemが必要になったようなのでリサイズについて調べてみました。

環境

使用するツール

こちらの記事でActive Storageで画像アップロードに必要なgemについてまとめています。 今回は次のツールを導入済みです。

ImageMagickとMiniMagickとimage_processingの関係性

ここが一番分かり辛かったです。 色々調べてみて各ツールの働きは次のようになっていると解釈しました。

  • ImageMagick: 画像処理を行う
  • mini_magick: ImageMagickをRailsで動かす
  • image_processing: mini_magickへの処理を指示する

つまり、画像リサイズは次のような流れで処理されているのだと思います。

  1. image_processingからmini_magickにリサイズ処理を指示する
  2. mini_magickがImageMagickを動かす
  3. ImageMagickで画像のリサイズ処理を行う

Rails6以前はmini_magickで用意されているメソッドを使って画像処理を行っていたようですが、Rails6以降はimage_processingを導入するように警告が出るようです。また、導入後にmini_magickのメソッドをimage_processingのメソッドで代用することがベストプラクティスっぽいです。

Rails 6.0の "Active Storage's ImageProcessing transformer doesn't support :combine_options" という警告に対処する方法 - Qiita

image_processingのリサイズ系メソッド

image_processingには4つのリサイズ系メソッドが用意されています。 縦横比を維持しながらリサイズされる点はどのメソッドも共通です。

  • resize_to_limit: 指定サイズより大きい場合のみ縮小
  • resize_to_fit: 指定サイズより大きい場合は縮小、小さい場合は拡大
  • resize_to_fill: 指定サイズに合わせてトリミングする(デフォルトは画像中心からトリミング)
  • resize_and_pad: 指定サイズに合わせてトリミングし、画像の背景色を追加する(デフォルトでは画像中心からトリミング)

resize_to_fillとresize_and_pad メソッドのトリミングの基準点はgravity オプションで指定できるようです。

image_processing/minimagick.md at master · janko/image_processing

大きな画像ファイルから自動的に小さなサムネイル画像を生成する (Image Processing) - まくまくHugoノート

実装

今回はActive Storageを使った画像アップロードをセットアップしたアプリに対して追加実装します。

  • userモデルに画像保存用のavatar カラムを用意
  • 画像の指定サイズは500 x 500
  • 画像のトリミングは無し

users#show ページに@user に含まれる画像をリサイズして表示する場合は次のようになります。

# app/controllers/users_controller.rb

class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end
end

# app/views/users/show.html.erb

<%= image_tag @user.avatar.variant(resize_to_fit: [500, 500]).processed %>

variantメソッド

画像処理を行うメソッド。

  • 引数に画像処理の詳細を指定する
  • 複数の処理をカンマ区切りで渡すことができる
  • 加工後の画像はDBに新しいデータとして保存される

Active Storage の概要 - Railsガイド

【Rails】ActiveStorageのvariantを使いこなす！便利な画像変換のメソッドやオプションを実例で解説（!, >, <, ^とは何か？）

processedメソッド

画像処理済みのデータを使い無駄な画像処理を減らし、負荷を減らすメソッド。

processedメソッドをつけると既に同じ加工を施したデータがないかを確認し、存在する場合はそれを呼び出します。

Active StorageのVariantの指定方法いろいろ - Qiita

まとめ

gemの関係性がいまいち掴めなくて時間が掛かってしまいましたが、なんとか実装できてよかったです。 提出まであと少し！

参照

Active Storageで画像アップロードに必要なgemについて - karlley's tech blog

Rails 6.0の "Active Storage's ImageProcessing transformer doesn't support :combine_options" という警告に対処する方法 - Qiita

image_processing/minimagick.md at master · janko/image_processing

大きな画像ファイルから自動的に小さなサムネイル画像を生成する (Image Processing) - まくまくHugoノート

Active Storageを使った画像アップロード機能のセットアップ - karlley's tech blog

【Rails】ActiveStorageのvariantを使いこなす！便利な画像変換のメソッドやオプションを実例で解説（!, >, <, ^とは何か？）

Active StorageのVariantの指定方法いろいろ - Qiita