Resize and crop image and keeping aspect ratio NodeJS & gm

user3277539 picture user3277539 · Feb 6, 2014 · Viewed 36k times · Source

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

mikefrey picture mikefrey · Aug 1, 2014

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