LoginSignup
4
3

More than 3 years have passed since last update.

【Rails】CarrierWaveとRMagickでいい感じにサムネイルをつくる

Posted at

はじめに

CarrierWaveとRMagickで画像を指定したサイズでいい感じ(中心をくり抜く)に
トリミングしてサムネイルにするやり方についての記事です。
参考となるサイトは複数ありましたが、初学者である自分はその内容の解釈に苦労し、
かなり時間を使ってしまいました。
(今回参考とさせていただいたサイトは記事の最後にまとめております)
僕と同じ初学者の方の参考になりましたら幸いです。

バージョン

Ruby 2.7.0
Rails 6.0.2.1
carrierwave 2.1.0
rmagick 4.0.0

やり方その1 メソッドを作成するパターン

ちなみにやり方その2の方が簡単です。
自分はまずこちらのやり方にいきついたので、一応残しておきます。

アップローダーに下記のとおり記載。

image_uploader.rb
  def create_thumb(width, height)
    manipulate! do |img|
      narrow = img.columns > img.rows ? img.rows : img.columns
      img.crop(Magick::CenterGravity, narrow, narrow).resize(width, height)
    end
  end

  version :thumb1 do
    process :create_thumb => [150, 200]
  end

横幅と高さを引数にとる処理を定義して、
サムネイルのバージョンに応じて横幅と高さを自由に設定する。
(上の例ではthumb1の指定で150×200のサムネイルを作成)

create_thumbメソッドの中身としては、
①画像の横と縦を比較し短い方をnarrowとして基準とする。
 a ? b : c #a が真であれば b さもなくば c
②中心からくりぬき、引数であたえられた横幅・高さにリサイズ
といった内容。

横幅・高さを変えてthumbを複数パターンつくり、
ビューで=image_tag @user.image_url(:thumb1)といった風に指定すれば
指定した通りのサムネイルが表示される。

やり方その2 resize_to_fillを活用するパターン

もっと簡単なやり方がありました。

image_uploader.rb
  version :thumb1 do
    process :resize_to_fill => [width, height, gravity = ::Magick::CenterGravity]
  end

width、heightにそれぞれ横幅と高さを入れればOK。

画像の反転を防ぐには

画像によっては意図せぬ反転が生じることが発覚。
アップローダーに下記の通り記載して対策。

image_uploader.rb
  def auto
    manipulate! do|image|
      image.auto_orient
    end
  end

  process :auto

他のつまづいたポイント

ImageMagickはバージョン6をインストールするべき

RMagickのインストールにはImageMagickが必要となります。
その際、最新版のImageMagickをインストールしてかなりはまってしまいました。
環境によってやり方は異なりますが、僕は下記でうまくいきました。
(最新版のImageMagickをアンインストールしてから実行)

ターミナル
 brew install imagemagick@6

 brew link --force imagemagick@6

参考

下記サイトを参考にさせていただきました。

やり方その①について
RMagick で正方形のサムネイルを作成する
railsのcarriewaveでrmagickを使って正方形の画像を作成する

やり方その②について
CarrierWave + RMagick 画像のリサイズをまとめてみました

画像の反転を防ぐにはについて
carrierwave 画像の回転を防ぐ

他のつまづいてポイントについて
rmagickのインストールには注意が必要|Ruby on Rails gem

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3