I am Hack Sparrow
Captain of the Internets.

Node.js Image Processing and Manipulation

Wondering how image processing is done in Node.js? Like almost all other serverside technologies, ImageMagick is the most popular choice for image processing in Node.js. But ImageMagick's syntax is a little too complicated for the average developer, and the method of calling it further complicates the matter.

Worry not, there is a Node.js module called EasyImage which will ensure that image manipulation in Node.js is a breeze for you - beginner or advanced user.

First make sure you have ImageMagick installed.

Ubuntu:

$ apt-get install imagemagick

Mac:

$ brew install imagemagick

CentOS:

$ yum install imagemagick

With ImageMagick installed, it's time to install the EasyImage Node.js module.

$ npm install easyimage

In your code you create an instance of EasyImage and call its methods to perform various image manipulation operations like resizing, cropping, and conversion to other formats. If you are advanced enough, you can even directly execute ImageMagic commands. How to do all these is revealed below.

var easyimg = require('easyimage');

To convert an image from one format to another:

easyimg.convert({src:'beach.jpg', dst:'beach.png', quality:10}, function(err, stdout, stderr) {
    if (err) throw err;
    console.log('Converted JPG to PNG, quality set at 10/100');
});

easyimg.convert({src:'beach.jpg', dst:'beach.gif'}, function(err, stdout, stderr) {
    if (err) throw err;
    console.log('Converted JPG to GIF');
});

If you are converting to JPEG, PNG, or MIFF; you can specify the quality level, 100 being the best, and 0 being the worst.

To resize an image:

easyimg.resize({src:'beach.jpg', dst:'beach-small.jpg', width:640, height:480}, function(err, stdout, stderr) {
    if (err) throw err;
    console.log('Resized to 640x480');
});

To crop an image:

easyimg.crop(
    {
        src:'beach.jpg', dst:'beach-cropped.png',
        cropwidth:128, cropheight:128,
        gravity:'North',
        x:30, y:50
    },
    function(err, stdout, stderr) {
        if (err) throw err;
        console.log('Cropped');
    }
);

In the above example we not only cropped the image but also converted the format to PNG. Image format conversion is not just confined to the convert() method, specify a different file extension for dst and you have it converted to that format. You can even convert to PDF, SVG, and TXT!

gravity defaults to Center; and x and y default to 0. So if you are to crop from the center of the image, you the above code can be re-written this way:

easyimg.crop(
    {
        src:'beach.jpg', dst:'beach-cropped.png',
        cropwidth:128, cropheight:128
    },
    function(err, stdout, stderr) {
        if (err) throw err;
        console.log('Cropped');
    }
);

For details about gravity, read the ImageMagick documentation.

Need to resize first and then crop? DON'T do this:

easyimg.resize(...);
easyimg.crop(...);

Instead used the rescrop() method, it is faster:

easyimg.rescrop(
    {
        src:'beach.jpg', dst:'beach-thumbnail.jpg',
        width:500, height:500,
        cropwidth:128, cropheight:128,
        x:30, y:50
    },
    function(err, stdout, stderr) {
        if (err) throw err;
        console.log('Resized and cropped');
    }
);

If the resize and crop dimensions are to be the same, you can even leave out cropwidth and cropheight. Don't forget to set gravity to 'NorthWest' to start cropping from the top left of the image.

easyimg.rescrop(
    {
        src:'beach.jpg', dst:'beach-thumbnail.jpg',
        width:128, height:128,
        gravity:'NorthWest'
    },
    function(err, stdout, stderr) {
        if (err) throw err;
        console.log('Resized and cropped');
    }
);

By the way, the name rescrop is derived from resize + crop.

Lastly, and most powerfully, you can execute ImageMagic convert commands yourself from EasyImage. But with this method, you are completely on your own, you have to compose the command, take care of errors etc. exec() is for the hax0rz, teh leetz.

easyimg.exec('convert cute\\ kitteh.jpg lol\\ kitteh.gif', function(err, stdout, stderr) {
    if (err) throw err;
    console.log('lolcats ftw!');
});

So there it is - easy image manipulation in Node.js using your friendly module EasyImage. EasyImage FTW.

14 Responses to “Node.js Image Processing and Manipulation”

  1. Edgard Leal says:

    Thanks Captain! 😀

  2. Captain says:

    Ahoy! Welcome!

  3. sravan kumar says:

    Hi, I used Easyimage , for resizind image. but it is not giving upto width :1280, for whatever the present width. Please help me to reach the required width size for 1280 p

    Thanks for response..

  4. Lútsen says:

    Hi, I think this pots is out of date. If I use the markup in this article it doesn’t work, but if I use the markup mentioned on GitHub it does work. So:

    Wrong:
    easyimg.rescrop(
    {
    src:’kitten.jpg’, dst:’./output/kitten-thumbnail.jpg’,
    width:500, height:500,
    cropwidth:128, cropheight:128,
    x:0, y:0
    },
    function(err, stdout, stderr) {
    if (err) throw err;
    console.log(‘Resized and cropped’);
    }
    );

    Right:
    easyimg.rescrop({
    src:’kitten.jpg’, dst:’./output/kitten-thumbnail.jpg’,
    width:500, height:500,
    cropwidth:128, cropheight:128,
    x:0, y:0
    }).then(
    function(image) {
    console.log(‘Resized and cropped: ‘ + image.width + ‘ x ‘ + image.height);
    },
    function (err) {
    console.log(err);
    }
    );

Make a Comment