Making mosaic images with GM() and NodeJS

Question

I'd like to make mosaic images using gm() and NodeJS but it seems not working with my code, I think that the problem is due to the original size of the image (600 * 200), my template is smaller than the images...

My result should be something like this :

enter image description here

My code :

gm()
.in('-page', '+0+0')
.in('./public/images/instafilm.jpg') // my empty template, white and 142 * 500
.in('-page', '+10+10')
.resize(122, 122, '!')
.in('./public/images/firstimage.jpg') // 600 * 600
.in('-page', '+10+132')
.resize(122, 122, '!')
.in('./public/images/secondimage.jpg') // 600 * 600
.in('-page', '+10+164')
.resize(122, 122, '!')
.in('./public/images/thirdimage.jpg') // 600 * 600
.in('-page', '+10+296')
.resize(122, 122, '!')
.in('./public/images/fourthimage.jpg') // 600 * 600
.mosaic()
.minify()
.write(newFileName, function (err) {
  if (!err) console.log('done');
  if (err) console.log(err);
  callback();
});

score 0 · Answer 1 · answered Sep 01 '15 at 11:33

I'm not an expert at gm but here are my suggestions:

You can try and remove the relative paths and use absolute instead. Also, I'm not sure you need to resize after all the .in('-page', '+10+xxx') I think you might be cutting out all the appended images.

Also, I don't think you need the wrapping image. It'll be created anyway.

Try:

gm()
.in('-page', '+10+10')
.in('/usr/home/**/firstimage.jpg') // absolute path 
.in('-page', '+10+132')
.in('./public/images/secondimage.jpg') //absolute path
.in('-page', '+10+164')
.in('/usr/home/**/thirdimage.jpg') //absolute path
.in('-page', '+10+296')
.in('/usr/home/**/fourthimage.jpg') //absolute path
.mosaic()
.minify()
.write(myAbsoluteFilePath, function (err) {
  if (!err) console.log('done');
  if (err) console.log(err);
  callback();
});

If you need a matrix you can use something like:

    var img = gm(); 

    for(var r = 0; r < settings.canvasSize.rows; r++){
        for(var c = 0; c < settings.canvasSize.cols; c++){
            var y = r * settings.imgSize.height + (settings.imgSize.marginY * r); 
            var x = c * settings.imgSize.width + (settings.imgSize.marginX * c); 

            img.in('-page', '+'+x+'+'+ y).in(settings.imgSize.path); 
        }
    }

    img
        .mosaic()
        .write(getNewFilename(), function(err){
            console.log(err); 
        });

Where I use the settings.imgSize.marginX and settings.imgSize.marginY to create margins in between the images.

Making mosaic images with GM() and NodeJS

1 Answers1