使用 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 |
+---+  +---+  +---+

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

Answer 1

我真的不做 Javascript 或节点，但我可以说在命令行上，我倾向于用 montage 命令做你要求的事情，但它可以用 convert 完成。您需要知道并且可能有用的是，您不必在文件系统中创建间隔 file 并将其置于配置控制下并放入构建脚本等中 - 而是, 您可以在 上动态创建 .

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

red.png

green.png

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

另一种选择

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

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 是设置，它们会一直持续到命令结束或更改。

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

Add margin between appended images with GraphicsMagick/gm

javascript

imagemagick

node.js

graphicsmagick