49hack

見習いエンジニアが魔法使いになるまで

Carrierwaveで画像をリサイズする

RMagickを使って画像のリサイズを行います。

今回はサムネイル表示用にバージョンthumbもつくってみます。

gemのインストール

# Gemfile
gem 'carrierwave'
gem 'rmagick' # 今回のリサイズ処理に必要

リサイズ処理を記述

# app/uploaders/image_uploader.rb
...
class CommentImageUploader < CarrierWave::Uploader::Base

    # RMagickをincludeします   
    include CarrierWave::RMagick

    # 1200x900にリサイズします
    process resize_to_limit: [1200, 900]

    # バージョンを作成して、別のリサイズを指定することもできます
    version :thumb do
        process resize_to_limit: [480, 360]
    end
...

画像の表示

モデルはこんな感じなので、

# app/models/users.rb
class User < ActiveRecord::Base
    mount_uploader :avater, ImageUploader
...

画像はこんな感じで表示します。

# app/views/user/show.html.slim
...
    # 画像の表示
    = image_tag @user.avater.url
    # thumb画像の表示
    = image_tag @user.avater.thumb.url
...

画像のリサイズオプションについて

いくつかリサイズオプションがあるのですが、いまいち違いがわからず調べたところ、こちらの記事がかなりわかりやすかったです。

CarrierWave + RMagick 画像のリサイズをまとめてみました - 麺処 まつばCarrierWave + RMagick 画像のリサイズをまとめてみました - 麺処 まつば

こんにちは。麺処まつば副店長です。久々の投稿ですけど、もう色々気にしないことにしました。店長の視線がなんだって言うんですか。(キッ)さて副店長、先日中ずっとCa...

resize_to_fitresize_to_limitの違い

両方とも、元画像のアクペクト比を維持したままリサイズしますが、

resize_to_fit:画像が指定した大きさより小さい場合、指定した大きさまで拡大する

resize_to_limit:画像が指定した大きさより小さい場合、なにもしない

拡大してボケるのがいやなので今回はresize_to_limitを使いました。

参考