使用ImageMagick舍入图片的角落

在我的Rails应用程序中,我希望有一个类似于Facebook的配置文件部分,其中上传的图像会自动缩略图并转角.我正在使用该convert实用程序将图像缩小为缩略图,但是是否可以选择绕过它们的角落？谢谢.

通用解决方案

此解决方案适用于透明和不透明的图片.要添加15像素半径圆角到original_picture.png100x100图片:

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

Facebook不修改图片有圆角.相反,他们使用HTML和CSS在每个用户图片上应用此图像:http://www.facebook.com/images/ui/UIRoundedImage.png

如果你检查UIRoundedImage.png,你会发现每个"正方形"都包含一个透明的中心和不透明的角落,这些角落与用户图片所依赖的背景相匹配.例如,如果用户图片在白色背景上,则白色不透明圆角将覆盖在用户图片上.

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