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

使用节点的gm包,我可以水平追加三个图像:

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

这创造了类似于:

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

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

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

我可以通过创build一个条形图像,然后在每个图像之后添加它,但是这看起来相当黑。 有任何想法吗?

我并没有真正做Javascript或者node,但是我可以说在命令行中,我会倾向于使用montage命令来做什么,但是可以通过convert来完成。 你需要知道什么可能是有用的,你不必在文件系统中创build一个间隔文件 ,并把它放在configuration控制之下,并把它放到构build脚本等 – 而是可以dynamic地创build。

所以,如果我有三个图像,每个50×50像素如下:

red.png

在这里输入图像描述

green.png

在这里输入图像说明

blue.png

在这里输入图像说明

如果你像你说的那样追加他们,你会这么做

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

给这个

在这里输入图像说明

如果你想让它们间隔10个像素,你可以预先设定这个大小一次,然后dynamic创build一个或多个间隔符,而不需要像文件系统中的任何东西,其中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 

在这里输入图像说明

另外一个select

还有另外一种方法来做你想做的事情,就是在你追加它们之前,把一些额外的背景拼接到你的图像上,就像这样:

 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则是一直持续到命令结束或设置改变的设置。