15

Railsアプリでは、アップロードされた画像が自動的にサムネイル化され、角が丸くなるFacebookのような同様のプロファイルセクションが必要です。ユーティリティを使用してconvert画像をサムネイルに縮小していますが、角を丸めるオプションもありますか？ありがとう。

4

4 に答える 4

18

ユニバーサル ソリューション

このソリューションは、透明な画像と不透明な画像で機能します。100x100 の画像に半径 15 ピクセルの丸みを帯びた角を追加するoriginal_picture.pngには:

convert -size 100x100 xc:none -draw "roundrectangle 0,0,100,100,15,15" mask.png
convert original_picture.png -matte mask.png \
  -compose DstIn -composite picture_with_rounded_corners.png

このソリューションは、PMによって提供されました: https://stackoverflow.com/a/1916256/499917

エレガントなソリューション、透明な画像では機能しません

このソリューションは、中間画像なしで機能します。いいですね！ただし、元の画像の透明度が損なわれます。したがって、画像が透明でないことが確実な場合にのみ使用してください。

半径 15 ピクセルの角を丸くしたいとします。

convert original_picture.png \
  \( +clone  -alpha extract \
    -draw 'fill black polygon 0,0 0,15 15,0 fill white circle 15,15 15,0' \
    \( +clone -flip \) -compose Multiply -composite \
    \( +clone -flop \) -compose Multiply -composite \
  \) -alpha off -compose CopyOpacity -composite picture_with_rounded_corners.png

便宜上、Ruby やその他の言語で一般的に行うことを以下に示します。

in_pic = "original_picture.png"
out_pic = "picture_with_rounded_corners.png"
radius = 15
cmd = "convert #{in_pic} \\( +clone  -alpha extract " +
        "-draw 'fill black polygon 0,0 0,#{radius} #{radius},0 fill white circle #{radius},#{radius} #{radius},0' " +
        "\\( +clone -flip \\) -compose Multiply -composite " +
        "\\( +clone -flop \\) -compose Multiply -composite " +
        "\\) -alpha off -compose CopyOpacity -composite #{out_pic}"
`#{cmd}`

ソース: http://www.imagemagick.org/Usage/thumbnails/#rounded

于 2013-09-24T21:17:36.117 に答える
7

Facebookは、角が丸くなるように写真を変更しません。代わりに、HTMLとCSSを使用して、この画像を各ユーザー画像に適用します：http: //www.facebook.com/images/ui/UIRoundedImage.png

を調べるUIRoundedImage.pngと、各「正方形」は透明な中心と、ユーザーの画像が置かれる背景と一致するように意図された不透明な角で構成されていることがわかります。たとえば、ユーザー画像が白い背景にある場合、白い不透明な丸い角がユーザー画像にオーバーレイされます。

の特定の部分だけを使用するためのCSS手法UIRoundedImage.pngは、「CSSスプライト」と呼ばれます。あなたはここでそれについてもっと読むことができます：http：//www.alistapart.com/articles/sprites/

于 2009-04-05T04:32:46.970 に答える
4

角の丸い例を次に示します：http：//www.imagemagick.org/Usage/thumbnails/#rounded_border。ある種のマスクを（手動または描画ツールを使用して）作成し、それを画像にオーバーレイする必要があります。

于 2009-04-05T04:04:54.463 に答える
1

これは、Perl を使用して ImageMagick で角を丸くするために書いたコードです。Ruby への移植はかなり簡単です。

http://article.gmane.org/gmane.comp.video.graphicsmagick.apis/322

于 2011-02-07T23:24:03.150 に答える