RMagic使ってリサイズしようとしたときに、思うようにいかなかった事例

メモ書きみたいなもんですがとりあえず。

投稿画像のリサイズをしたい!

現在Railsの勉強中。

掲示板的なアプリ作って勉強中なのですが、画像を投稿できるようにはしたものの、大きな画像を投稿されるとちょっと扱いにくい。

CSSで max-width を指定したりしていましたが、UPしたときにリサイズできないのかなーと。

ということで検索してgemのcarrierwavermagicの組み合わせを知りました。

carrierwave:画像投稿のシステムが簡単に作れるよ!

rmagic:carrierwaveの拡張機能的なもので、画像に対していろんな加工ができるよ!

このようなものと認識しています。

このrmagicの加工機能でリサイズがあるようなのでこちらを使ってみようとしたところでうまくいかない事例がありました。

コードこんなかんじ

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  	  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

    process resize_to_limit: [300,300]

    version :large do
        process resize_to_limit: [800,800]
    end
<%= image_tag @user.image_name.url %>
<%= image_tag @user.image_name.large.url %>

さらっと機能について確認

process resize_to_limit: [300,300]

画像投稿されたときに300×300サイズを上限としてリサイズしてね。

縦または横どちらかが300pxを超えたらそっちを300に合わせるよ。

もう片方の足りてない方はアスペクト比保ったままだよ。

こんな意味ですね。

version :large do
        process resize_to_limit: [800,800]
end

300×300だけじゃなくて別のサイズも作っておきたいんだよな〜、っていうときはこんなふうにして別サイズを作れるらしいですね。

800×800上限の画像も欲しいんやぁ〜

どううまくいかなかったのか

<%= image_tag @user.image_name.url %>
<%= image_tag @user.image_name.large.url %>

私としてはこれで前者が300×300を上限にリサイズした画像を、

後者が800×800を上限にリサイズした画像を表示してくれると思ったんですよ。

でも表示されたのは同じ大きさ、しかも両方300×300を上限にリサイズした画像。

どうやっても800×800の画像ができなかったんですね。

いろいろ試してみた

    version :large do
        process resize_to_limit: [800,800]
    end

    process resize_to_limit: [300,300]

300×300に先にリサイズされてしまってるから800×800に引っかからないんじゃね、っていう発想

だから800×800の方を先に持ってきてみた。

結果先ほどと変わらず。


    process resize_to_limit: [800,800]

    version :thumb do
        process resize_to_limit: [300,300]
    end

順番じゃなくて普通の process のほうが先に処理されるのかな、と考えて次はこんな感じに。

結果これが正解だったようです。

いろいろ検索するとみんな thumb(サムネ画像を意味する)の方を version で処理してるし、それはこういう理由からだったんですね。

まとめ

process 〜 のほうが先に処理されるのでこちらにより大きいサイズを、

version の方により小さいサイズを指定するとよいということでした。

ま、終わってみれば そうだよな ってレベルですが、超初心者の方なら同じところで止まることもあるかも、と思って残しておきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください