使用 GraphicsMagick/gm 在附加图像之间添加边距答案

【问题标题】：Add margin between appended images with GraphicsMagick/gm使用 GraphicsMagick/gm 在附加图像之间添加边距
【发布时间】：2015-05-10 18:46:58
【问题描述】：

使用 Node 的 gm 包，我可以水平附加三个图像：

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

这会产生类似的东西：

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

所有图像都接触到的地方。但是，我想要 10px 的边距，所以它看起来像这样：

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

我可以通过创建一个带状图像并在每个图像之后附加它来做到这一点，但这似乎相当 hacky。有什么想法吗？

【问题讨论】：

本尼迪克特，你不仅应该'Accept'马克的回答，还应该'Upvote'它:-)

标签： javascript node.js imagemagick graphicsmagick

【解决方案1】：

我不会真正使用 Javascript 或节点，但我可以说，在命令行上，我倾向于使用 montage 命令执行您要求的操作，但可以使用 convert 完成。您需要知道并且可能有用的是，您不必在文件系统中创建分隔符 file 并将其置于配置控制之下并放入构建脚本等 - 相反，您可以动态创建。

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

red.png

绿色.png

蓝色.png

如果你按照你说的附加它们，你会这样做

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

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

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

另一种选择

还有另一种方法可以做你想做的事，那就是在你附加它们之前拼接一些额外的背景到你的图像上，像这样：

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

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

【讨论】：

我只是垂直添加图像。 size 参数语法是这样的： Vertical it's x10。水平是 10 倍。