GM ImageMagic：圆形图像边角，传递选项

Question

嗨，我想将一些图片转换为圆角。我在ImageMagic的网站上找到了如何完成这个任务。

  convert thumbnail.gif \
    \( +clone -crop 16x16+0+0  -fill white -colorize 100% \
       -draw 'fill black circle 15,15 15,0' \
       -background Red  -alpha shape \
       \( +clone -flip \) \( +clone -flop \) \( +clone -flip \) \
     \) -flatten  rounded_corners_red.png

http://www.imagemagick.org/Usage/thumbnails/#rounded 的问题在于我不知道如何将所有这些选项传递给GM。我已经尝试过了。

 gm.in("\( +clone -crop 16x16+0+0  -fill white -colorize 100%
           -draw 'fill black circle 15,15 15,0'
           -background Red  -alpha shape
           \( +clone -flip \) \( +clone -flop \) \( +clone -flip \)
         \) -flatten")

但是它没有起作用。这是我调整图像大小的方法：

var gm = require("gm").subClass({ imageMagick: true })
var _ = require("lodash")
var images = ['1b.jpg', '2b.jpg', '3b.jpg']

_.forEach(images, function(image, key) {

    var img = gm( __dirname + '/' + image )
    var dest = __dirname + '/' + key+'.jpg'
    img.resize('100', '100', '^')
    img.gravity('Center')
    img.crop('100', '100')

    img.in("\( +clone -crop 16x16+0+0  -fill white -colorize 100%
           -draw 'fill black circle 15,15 15,0'
           -background Red  -alpha shape
           \( +clone -flip \) \( +clone -flop \) \( +clone -flip \)
         \) -flatten")

    img.write( __dirname + '/' + key+'.jpg', function (err) {
     if (!err) console.log(' image done! ');
    })

})

- Alex

---

你想要红色还是透明的圆角？你想要应用圆角的图片大致都是相同大小的吗？如果是，那么它们的尺寸是多少？ - Mark Setchell

所以我想要做的是自动化这个过程，这个例子中图像的大小为100x100，但在某些时候可能会有所不同。正如您可以从上面的示例中看到的那样，图像已被调整大小和裁剪，因此在此之后我想将其制作成圆角。关于背景，我更喜欢透明的，但如果不可能，任何颜色都可以。 - Alex

Answer 1

假设您的原始图像是一个100x100的绿色正方形：

gm convert -size 100x100 xc:green input.png

首先，创建掩码：

gm convert -size 100x100 xc:none -fill black -draw "roundrectangle 0,0,99,99,10,10" mask.png

接下来，将遮罩应用到输入图像中：

gm composite -size 100x100 input.png xc:none mask.png output.png

理解composite的参数，首先将input.png叠加在图像xc:none之上（完全遮盖它），然后使用mask.png来遮蔽input.png的某些区域，并显示出底部的xc:none。

（请参见roundrect，这是一个无需创建中间文件即可使任意大小的图像变为圆角的shell脚本。）

- mjs

Answer 2

我不认为GraphicsMagick支持括号，这似乎是一种非常复杂的做法。我会创建一个阿尔法掩模，显示我想要图片不透明/透明的区域，并将其复制到图像中。

因此，具体来说：

convert -size 100x100 xc:none -draw "roundrectangle 0,0,99,99,12,12" mask.png

convert -size 100x100 gradient:blue-yellow mask.png -compose copyopacity -composite result.png

另外，请注意JPEG不支持透明度，因此您将无法在JPEG输出文件中存储透明角落。

如果您想要红色的角落，可以使用以下方法：

convert -size 100x100 xc:red -draw "roundrectangle 0,0,99,99,12,12" -transparent black mask.png
convert -size 100x100 gradient:blue-yellow mask.png -composite result.png

- Mark Setchell

---

最近版本的ImageMagick确实支持括号。请参见http://www.imagemagick.org/Usage/basics/#parenthesis - Jon Adams

@JonAdams 我指的是 GraphicsMagick 不支持括号。 - Mark Setchell

我不知道GraphicMagick，但是op问的是_ImageMagick_，而不是GM。我的观点是，op使用括号的原始解决方案理论上仍然可以工作...你的答案有点混淆了，因为它转而谈论非常相似但并不完全相同的GM。我并不是在说你错了或者不对（我对这两个工具都不是专家）-我只是想为将来可能不了解GM和IM之间差异的用户澄清一下。（甚至提醒自己，因为我也觉得这些差异很困惑。） - Jon Adams