Trouble composing multiple files

Hello everybody,

first of all thank you for this fine piece of software. It even runs on my raspberry pi (arm8), great job. Secondly, I want to apologize, because this might be regarded as a very novice question and it (might) not be an issue at all.

I am trying to combine several images into one, but I have trouble doing so. E.g. I want to put images A, B and C on a blank alpha, my result is only C, but not A and B appearing. I tried to put together a precise example of showing what is happening:

var sharp = require('sharp');

var images = [
    __dirname + '/test.jpg', // blue square, 200x200
    __dirname + '/test.jpg',
    __dirname + '/test.jpg'
];

// create 1800x1200 transparent canvas
var canvas = sharp(null, {
    create: {
        width: 1800, 
        height: 1200, 
        channels: 4, 
        background: '#ffffff00'
    }
});

// load images
var buffers = [];
for (i = 0; i < images.length; i++) {
    // load the image into sharp
    console.log("Loading image");
    buffers.push(sharp(images[i]).resize(50, 50).toBuffer());
}

// wait for buffers to be ready
Promise
    .all(buffers)
    .then(function (buffers) {
        
        // overlay the canvas with the buffers, spread them out a bit
        for (i = 0; i < buffers.length; i++) {
            sharp(buffers[i]).toFile('buffer-'+ i + '.png'); // 50x50 blue squares
            canvas = canvas.overlayWith(buffers[i], {left: i*100, top: i*100});
        }
        canvas.toFile('canvas.png'); // has only one blue square, not three on it
    }).catch(error => console.log(error));

The results

Please note that I did not manage to include the images directly. Basically, I expected that there will be three (3) blue squares on the canvas, but the resulting canvas.png has only one on it. From the position I would assume that the last canvas.overlayWith(..) was written to the canvas, overwriting the existing ones.

test.jpg - input http://abload.de/image.php?img=buffer-0lky4n.png

Output (canvas.png) http://abload.de/image.php?img=canvastzzrd.png

Expected output (but transparent, this was a mistake of mine): http://abload.de/image.php?img=expected-canvasrwxf1.png

What did I do wrong here, or is just one .overlayWith supported? Thank you for your time to read up on all this.

Sebastian

[shwill]

Here’s at least part of the promised result. I am capturing images with Canon EOS digital camera, and I have plenty of time between captures and composing. Since I am running it on a Raspberry Pi, memory is quite limited, so I gave up on the idea to store each captured and resized image in a buffer (raw buffers are huge, I quickly ran out of memory), and build some kind of queue system.

So, in pseudo-code, I have something like this:

add(filename) {
   // options for the whole image
   const defaultOpts = {raw: {height: 200, width: 200, channels: 4}};

   // load background canvas as the first buffer
   if (this.buffer === null) {
     this.buffer = sharp(background).raw().toBuffer();
   }

   // I am getting width, height, left and top as meta information, just assume that they are "there"
   var newImage = sharp(filename)
   .resize(width, height)
   .rotate(180) // since my camera is upside-down, I need to do this. Space limitation in the photobooth box
   .raw()
   .toBuffer();

   // contains top and left for translation of the resized image, too
   const newImageOpts = { raw: {height: height, width: width, channels: 4}, top: top, left: left};

   Promise.all([this.buffer, newImage])
   .then( function (buffers) {
      this.buffer = sharp(buffers[0], defaultOpts).overlayWith(buffers[1], newImageOpts).raw().toBuffer();
   })
   .catch (function(reason) {
      throw reason;
   });
}

Perhaps it might help someone else getting on track.

[shwill]

Thanks for the headsup, I spent my time building other code and I am coming back right now at the image processing part, so if I manage to pull something off, I will post it here, too, as an additional ressource for other users.