How to composite multiple images in one stream

Question

I'm trying to composite multiple images into a single stream that will be piped as a response. I'm using Node.js and GraphicsMagick for Node at https://github.com/aheckmann/gm.

If I'm compositing two images into a stream it works fine and for this example it shows two/thirds of the final composite as expected. Here is my code:

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);
})

This works great in Postman

But when I try and composite three images it doesn't fill in the bottom part of the picture correctly as intended. The code is this:

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);
})

I can't figure out why the output is this:

score 0 · Accepted Answer · edited May 23 '17 at 12:01

Figured out a great answer write here: https://stackoverflow.com/a/20611669/4447761 Shout out to Ryan Wu!

Here is my final code

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);
})

How to composite multiple images in one stream

1 Answers1