使用ImageMagick对图片的角进行圆角处理

Question

在我的Rails应用程序中，我希望有一个类似Facebook的个人资料部分，在那里上传的图片会自动缩略图和圆角。我正在使用convert实用程序将图像缩小为缩略图，但是否也有圆角的选项？谢谢。

Answer 1

这里有一些圆角的例子：http://www.imagemagick.org/Usage/thumbnails/#rounded_border。您将需要创建某种类型的蒙版(手动或使用绘图工具)，然后将其覆盖到图像上。

Answer 2

通用解决方案

此解决方案适用于透明和非透明图片。要将15像素半径圆角添加到100x100图片的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

优雅的解决方案，不支持透明图片

这个解决方案不需要任何中间画面就可以工作。多好啊!但它会破坏你的原始图片的透明度。所以只在你确定你的图片不透明的时候才使用。

假设你想要半径为15px的圆角：

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

Answer 3

Facebook不会将图片修改为圆角。相反，他们使用超文本标记语言和层叠样式表在每个用户图片上应用此图像：http://www.facebook.com/images/ui/UIRoundedImage.png

如果你检查一下UIRoundedImage.png，你会发现每个“正方形”都由一个透明的中心和不透明的边角组成，这些边角与用户图片所在的背景相匹配。例如，如果用户图片位于白色背景上，则白色不透明圆角将覆盖在用户图片上。

仅使用UIRoundedImage.png的特定部分的CSS技术称为"CSS sprites“。你可以在这里阅读更多信息：http://www.alistapart.com/articles/sprites/