RailsのPaperclipを使った画像が縦に伸びて比率がおかしい。

前提・実現したいこと

Railsでアプリ作成中です。
Paperclipを導入し、ユーザーがプロフィール画像をアップロードできるようにしました。
しかし、アップロードした画像の縦横の比率がおかしく、縦に伸びたような写真になってしまいます。
プロフィール画像は、正方形のradius50%で丸型（Instagramのプロフィール画像と同じ）です。

横長の写真や縦型の写真をアップロードするとなぜかそのような形になってしまいます。

おそらくどんな形の写真もいったん正方形に直す処理をされているのかと思います。

発生している問題・エラーメッセージ

該当するhtml.erb

erb
1<div class="image">
2    <div class="circle-1"></div>
3    <div class="circle-2"></div>
4    <%= image_tag(@user.avatar, :size => "70x70", :alt => 'Profile image') %>
5</div>

該当のソースコード

user.rb

ruby
1  has_attached_file :avatar, styles: { medium: "300x300", thumb: "100x100" }, :default_url => 'missing_:style.png',
2   :convert_options => {:square  => "-gravity Center -crop 150x150+0+0"}

試したこと

user.rbのhas_attached_fileをいろいろいじってみましたが、変わりませんでした。
medium: "300×300#"など
convert以下も検索してでてきたのでつけてみたのですが変わりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

convert_optionsのkeyはスタイル名(ここでいうとmedium/thumb)、もしくはすべてのスタイルを指定するallです。

試していませんが、以下のように修正すれば正方形にcropされるのではないかと思います。

:convert_options => {:all => "-gravity Center -crop 150x150+0+0"}

ちなみにですが、paperclipはDeprecatedになっています。
今から新規に開発する場合は、RailsのActiveStorageを使ったほうが良いかと思います。
https://github.com/thoughtbot/paperclip#deprecated

投稿2019/02/07 06:58

Kta-M

総合スコア456

Romay

2019/02/07 23:25

回答いただきありがとうございます。:allで試してみたのですが、やはり比率がおかしくくしゃっとした画像になってしまいます...。原因がこのuser.rbのモデル以外見当たらないのですが他に検討余地はありますでしょうか。すでに開発が終盤を迎えているのですが、ActiveStorageへの変更も検討してみようと思います。

Kta-M

2019/02/07 23:54 編集

うーん、、ImageMagickはインストールされていますよね？ `convert_opitons`で指定する内容はImageMagickのオプションそのままなので、一旦ImageMagickのコマンドを直接叩いて、うまくコンバートされるか試してみてもらえますか？ $ convert src.png -gravity Center -crop 150x150+0+0 dst.png

Romay

2019/02/08 18:43

ImageMagickはインストールされていたのですが、rmagickとバージョンの互換性がなかったようです。 https://qiita.com/DriftwoodJP/items/56e9f9265022ba7a9802 こちらの記事にある、「現行の rmagick v2.16.0 の対応するバージョンは ImageMagick v6 までです。 ImageMagick v7 には対応していません。」という状況でした。ただ、この記事にあるように実行すると、最後のrmagick再インストールがうまくいかずまた詰まっております...。

Kta-M

2019/02/08 22:26

なるほど、確かにバージョンの問題ありましたね。自己解決できなさそうであればまた状況を書いてみてください。

Romay

2019/02/09 01:51

ImageMagick6にしたところうまくいった様です。しかし、このviewのようになっており <img alt="Profile image" src="/system/users/avatars/000/000/003/original/selfie1.jpg?1549676698" width="70" height="70"> DBを見た所、mediumは正方形にできてましたが、viewで引っ張ってきているのがoriginalの画像のようです。view側でこれを指定する方法はありますでしょうか？

Romay

2019/02/09 01:55

<%= image_tag(@user.avatar(:medium), :size => "70x70", :alt => 'Profile image') %> でできました！ありがとうございました！

行動規範の内容に同意します