javascript - 在 graphicsmagick 中使用 append() 拼接图像

Question

我有大量图像存储在单独的服务器上，需要在单个页面上显示为某种马赛克，其中各个元素可以动态显示或隐藏。

这些图像应该被获取、调整大小，然后作为 Sprite 拼接在一起，并用作 div 上的背景图像。在这一点上，获取和调整大小不是问题，因为最大的障碍是理解附加方法，或者更确切地说，如何将图像添加到集合中，以便使用所述方法。

根据文档:

gm("img.png").append(ltr)

应该:

Append a set of images

如何将多张图片放入“集合”？

Answer 1

假设 images 是一个路径字符串数组，如下所示:

[ "/home/user/first.jpg", "/home/user/a.png", "/home/user/another.gif" ];

那么这应该可以工作:

var gm = require('gm');

var gmstate = gm(images[0]);
for (var i = 1; i < images.length; i++) gmstate.append(images[i]);

// finally write out the file asynchronously
gmstate.write('/home/user/result.png', function (err) {
  if (!err) console.log('Hooray!');
});

思路是:

1. 从一个 graphicsmagick 状态变量开始 gmstate
2. 在循环中同步追加它。
3. write() 做真正的工作，而且是异步的。

这等同于 gm('first').append('second').append('third')....append('last')。

也许可以从一个空状态开始:var gmstate = gm();。

我必须承认，如果文件中有列表，LeeNX 答案中的 @ 文件列表 hack 会容易得多，但如果没有……？

编辑:如果您需要水平附加图像，请将第二个参数 true 添加到 append()，如下所示:

gmstate.append(image, true);

来源:Documentation for append()