使用GraphicsMagick/gm在添加的图像之间添加边距

Question

使用GraphicsMagick/gm在添加的图像之间添加边距

javascriptnode.jsimagemagickgraphicsmagick

3

使用Node的gm包，我可以将三张图片水平拼接：

gm('img1.jpg').append('img2.jpg', true).append('img3.jpg', true).write('out.jpg');

这会创建一个类似于以下的内容：

+---+---+---+
| 1 | 2 | 3 |
+---+---+---+

所有图片都需要对齐。然而，我想要10像素的边距，因此它应该是这样:

+---+  +---+  +---+
| 1 |  | 2 |  | 3 |
+---+  +---+  +---+

我可以通过创建一个条带图像，并在每个图像后附加它来实现这一点，但这似乎有些hacky。有什么想法吗？

- Benedict Lewis

Benedict，你不仅应该“接受”Mark的答案，还应该“点赞”它 :-) - Kurt Pfeifle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Setchell · Accepted Answer

我并不擅长Javascript或node，但我可以说，在命令行上，我倾向于使用montage命令来完成你所要求的操作，但也可以使用convert命令完成。你需要知道的是，你无需在文件系统中创建一个空白文件并将其放在配置控制和构建脚本等下，而是可以动态地创建。

所以，如果我有三个50x50像素的图像如下：

red.png

enter image description here

green.png

enter image description here

blue.png

enter image description here

如果按照你说的方式将它们附加在一起，你会这样做。

convert red.png green.png blue.png +append result.png

提供这个

输入图像描述

如果您想让它们间隔10像素，可以预设该大小一次，然后动态创建一个或多个间隔器，无需文件系统中的任何内容，例如下面的代码，其中xc:none是一小块透明画布：

convert -size 10x red.png xc:none green.png xc:none blue.png +append result.png

enter image description here

如果您想更好地了解它的工作原理，我已经更改了一些参数，以便您可以看到透明，粉色和黄色部分来自哪里，并根据您的需求进行调整：

convert -background pink -size 80x20 red.png xc:none green.png xc:yellow blue.png +append montage.png

enter image description here

另一个选项

还有一种实现你想要的效果的方法，就是在将图片追加到页面之前，先对图片进行拼接并添加一些额外的背景，像这样：

convert -gravity east -background yellow red.png blue.png -splice 90x green.png +append montage.png

输入图像描述

请注意，我已将gravity设置为East，因此每个图像的额外列都附加在其右侧，并且我只进行了一次剪辑(splice) - 原因是-splice是一个运算符(operator)，因此它适用于已加载的所有图像（即red.png和blue.png），而-gravity east和-background yellow是设置(settings)，它们持续到命令结束或被更改。