javascript - 使用 GraphicsMagick/gm 在附加图像之间添加边距

Question

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

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

这会创建如下内容:

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

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

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

我可以通过创建一个 strip 图像并将其附加在每个图像之后来做到这一点，但这看起来很老套。有什么想法吗？

Answer 1

我并不真正使用 Javascript 或 Node ，但我可以说在命令行上，我倾向于使用 montage 命令执行您的要求，但它可以通过转换。您需要了解并且可能有用的是，您不必在文件系统中创建间隔 文件 并将其置于配置控制之下并放入构建脚本等中 - 相反，您可以在动态上创建。

所以，如果我有如下三张 50x50 像素的图片:

红色.png

绿色.png

蓝色.png

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

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

给这个

如果你想让它们间隔 10 个像素，你可以只预设一次那个大小，然后动态创建一个或多个间隔，而不需要在文件系统中做任何事情，就像这样，其中 xc:none 是一小块透明 Canvas :

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

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