Resize and crop image and keeping aspect ratio NodeJS & gm

Question

I've been trying to create some thumbnails using the gm package from NodeJS, but I'm out of lucky. I need to resize images bigger than 600x600 (could be any width/height, starting from the given one) but when I pass the size to gm, it creates an image that doesn't have the same size I requested.

For example, given this code, I assume that running node app /path/to/image.png I'll receive an image with size of 200x100, but instead I got, say, an image of 180x100 or 200x90...

gm(fileLocation)
    .thumb(200, 100, 'processed.' + process.argv[2].split('.').pop(), function() {
        console.log("Done!");
    });

I've also tried with the resize option. There's even an option to force the size, but the aspect ratio of the output goes horrible...

gm('/path/to/image.jpg')
    .resize(353, 257)
    .write(writeStream, function (err) {
         if (!err) console.log(' hooray! ');
    });

Answer 1

Try with imagemagick package for NodeJS: https://github.com/yourdeveloper/node-imagemagick

im.crop({
    srcPath: process.argv[2],
    dstPath: 'cropped.' + process.argv[2].split('.').pop(),
    width: 200,
    height: 200,
    quality: 1,
    gravity: 'Center'
}, function(err, stdout, stderr){
    if (err) throw err;
    console.log('resized ' + process.argv[2].split('/').pop() + ' to fit within 200x200px');
});

---

Update: Please note that the node-imagemagick package hasn't been updated in quite a long time. Please consider Freyday's answer since it's most up-to-date.

Answer 2

To achieve a resized, cropped image with a center gravity with the gm module, you can use something similar to this:

gm('/path/to/image.jpg')
  .resize('200', '200', '^')
  .gravity('Center')
  .crop('200', '200')
  .write(writeStream, function (err) {
    if (!err) console.log(' hooray! ');
  });

The '^' argument on the resize function will tell GraphicsMagick to use the height and width as a minimum instead of the default behavior, maximum. The resulting resized image will have either the width or height be your designated dimension, while the non-conforming dimension is larger than the specified size.

Then gravity function tells GraphicsMagick how the following crop function should behave, which will crop the image to the final size.

You can find detailed documentation for the GraphicsMagick options used by the gm module here: http://www.graphicsmagick.org/GraphicsMagick.html

Answer 3

Another solution without external libraries (except by imagemagick) is create your own solution:

var exec = require('child_process').exec;

resize = function (image) {
  var cmd = 'convert ' + image.src + 
  ' -resize ' + image.width + 'x' + image.height + '^' + 
  ' -gravity center -crop ' + image.width + 'x' + image.height + '+0+0 ' +
  image.dst;

  exec(cmd, function(error, stdout, stderr) {
    if(error) {
      console.log(error);
    }
  });
}

And then call it:

resize({
    src: sourceFile,
    dst: destinyFile,
    width: 320,
    height: 240
});

It will allow your custom parameters of quality, crop, watermark, etc...

Answer 4

Two things...

1) https://github.com/rsms/node-imagemagick - This package is no longer supported I would recommend the original package you were using.

2) The reason it's not resizing is that the .resize function takes in a string, not an integer. It should be... ('353', '257')

gm('/path/to/image.jpg')
    .resize('353', '257')
    .write(writeStream, function (err) {
         if (!err) console.log(' hooray! ');
    });

Answer 5

Try with Jimp package for Node.js https://www.npmjs.com/package/jimp. Which is better than gm I think. It does not require any dependencies. I tried to use gm before but I was not able to install dependencies for gm. End up I used jimp and everything worked fine.

   Jimp.read('lenna.png', (err, lenna) => {
      if (err) throw err;
      lenna
        .resize(256, 256) // resize
        .write('lena-small-bw.jpg'); // save
    });