15

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

4

4 回答 4

18

通用解决方案

此解决方案适用于透明和非透明图片。添加 15 像素半径的圆角original_picture.png是 100x100 图片：

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

于 2013-09-24T21:17:36.117 回答
7

Facebook 不会将图片修改为圆角。相反，他们使用 HTML 和 CSS 将此图像应用于每个用户图片： http: //www.facebook.com/images/ui/UIRoundedImage.png

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

仅使用特定部分的 CSS 技术UIRoundedImage.png称为“CSS sprites”。你可以在这里阅读更多关于它的信息：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 回答