如何在一个流中合成多个图像

Posted 2023-03-23

【中文标题】如何在一个流中合成多个图像

【英文标题】：How to composite multiple images in one stream

【发布时间】：2015-12-23 23:37:18

【问题描述】：

我正在尝试将多个图像合成到一个流中，该流将作为响应通过管道传输。我在https://github.com/aheckmann/gm 使用Node.js 和GraphicsMagick for Node。

如果我将两个图像合成到一个流中，它可以正常工作，对于此示例，它按预期显示最终合成的二/三。 这是我的代码：

app.get('/call_2image_stream', function(req, res)

    res.writeHead(200, 'Content-Type' : 'image/png');
    var path = (__dirname + '/test_folder/happy_right.png');
    var path2 = (__dirname + '/test_folder/happy_left.png');
    gm(path)
      .composite(path2)
      .stream('png')
      .pipe(res);
)

这在 Postman 中效果很好

但是当我尝试合成三张图像时，它没有按预期正确填充图片的底部。代码是这样的：

app.get('/call_3image_stream', function(req, res)

    res.writeHead(200, 'Content-Type' : 'image/png');
    var path = (__dirname + '/test_folder/happy_bottom.png');
    var path2 = (__dirname + '/test_folder/happy_right.png');
    var path3 = (__dirname + '/test_folder/happy_left.png');
    gm(path)
      .composite(path2)
      .composite(path3)
      .stream('png')
      .pipe(res);
)

我不知道为什么输出是这样的：

【参考方案1】：

想出一个很好的答案写在这里：https://***.com/a/20611669/4447761 向吴瑞恩大喊！

这是我的最终代码

app.get('/final_code', function(req, res)
    res.writeHead(200, 'Content-Type' : 'image/png');
    gm()
     .in('-page', '+0+0')
     .in(__dirname + '/test_folder/happy_right.png')
     .in('-page', '+0+0') 
     .in(__dirname + '/test_folder/happy_left.png')
     .in('-page', '+0+0') 
     .in(__dirname + '/test_folder/happy_bottom.png')
     .mosaic()
     .stream('png')
     .pipe(res);
)