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

Question

在我的Rails应用程序中，我希望有一个类似于Facebook的个人资料部分，上传的图像会自动缩略并圆角处理。我正在使用convert实用程序将图像缩小为缩略图，但是否有选项可以将它们的角落也变成圆形？谢谢。

- alamodey

Answer 1

通用解决方案

该解决方案适用于透明和非透明图片。要将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://dev59.com/qHI-5IYBdhLWcg3wVWli#1916256

优雅的解决方法，无法处理透明图片

此解决方案无需任何中间图片即可实现效果。很好！但它会破坏原始图片的透明度。因此，请仅在您确定您的图片不透明时使用。

假设您想要半径为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

- philippe_b

---

当我尝试在Windows 7上使用命令行版本时，"mask.png"的右下角偏移了。为了修复这个问题，我不得不从-draw参数中删除1个像素，例如：convert -size 100x100 xc:none -draw "roundrectangle 0,0,99,99,15,15" mask.png - raider33

对我来说，这个遮罩只覆盖了初始图片的左上角，并且非常小。改变遮罩的大小可以使剪裁区域更大，但它仍然具有相同的左上角。有什么帮助吗？ - Paul

Answer 2

Facebook不会修改图片以使其拥有圆角。相反，他们使用HTML和CSS将这个图片应用到每个用户的头像上：http://www.facebook.com/images/ui/UIRoundedImage.png 如果你检查一下UIRoundedImage.png，你会发现每个“正方形”都由一个透明的中心和不透明的圆角组成，这些圆角是为了与用户头像所在的背景相匹配。例如，如果用户头像在白色背景上，则会在用户头像上覆盖白色不透明的圆角。

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

- Ron DeVera

Answer 3

以下是一些圆角示例：http://www.imagemagick.org/Usage/thumbnails/#rounded_border。您需要创建某种形式的掩码（手动或使用绘图工具），然后将其覆盖到您的图像上。

- Jeremy Stanley

---

有没有任何jQuery插件可以自动完成这个操作，还是说这只是一厢情愿的想法？ - JJ.

本页面提供了在图像上使用jquery角落插件的示例： http://www.malsup.com/jquery/corner/image.html它引用了这里的插件：http://jqueryjs.googlecode.com/svn/trunk/plugins/corner/jquery.corner.js - Jeremy Stanley

Answer 4

这是我使用Perl编写的代码，使用ImageMagick来实现圆角。它应该很容易地移植到Ruby中：

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

- Mark Stosberg