Javascript 使用GraphicsMagck/gm在附加图像之间添加边距

使用节点的

gm

包，我可以水平附加三个图像：

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

这会产生如下结果：

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

所有的图像都会接触到。但是，我想要10px的保证金，所以看起来是这样的：

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

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

---

我可以通过创建一个条形图来实现这一点，并在每个条形图之后附加它，但这看起来相当粗糙。有什么想法吗？

我并不真的做Javascript或node，但我可以说，在命令行中，我倾向于使用

蒙太奇

命令执行您要求的操作，但可以使用

转换

来完成。您需要知道的是，您不必在文件系统中创建一个间隔文件，并将其置于配置控制和构建脚本中，等等——相反，您可以动态地创建间隔文件

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

red.png

green.png

blue.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

另一个选项

还有另一种方法可以满足您的需要，即在附加图像之前，先将一些额外的背景拼接到图像上，如下所示：

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

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

---

请注意，我已将重力设置为East，以便在每个图像的右侧附加额外的列，而且我只拼接了一次-原因是

-splice

是一个运算符，因此它适用于所有已加载的图像（即red.png和blue.png），而

-gravity east

和

-background yellow

是持续到命令结束或更改的设置。

Benedict，您不仅应该“接受”Mark的答案，还应该“投票”它：-）我只是垂直添加了图像。size参数语法如下：垂直，它是x10。水平方向是10倍。