Node.js: image resizing without ImageMagick

Question

I\'m developing a web app on Node.js (+ express 4) where users can set their profile image by uploading it to the server. We already limit the file mimetype and max filesize

Answer 1

sharp has enjoyed some popularity recently, but it’s the same idea as *Magick bindings.

However, having to install ImageMagick/GraphicsMagick to do a simple image resizing seems too overkill for me

Image resizing is anything but simple. The JPEG format is particularly complex, and there are several ways to scale graphics with results of varying quality, few of them easily implemented. Image processing libraries exist to do this job, so if there’s no other reason why you can’t install them, go for it.

Answer 2

Implemented image resize using Google Drive API v3. This method is recommended for Google Apps Script to insert images into Google Sheets.

Algorithm:

1. Upload image to the Google Drive folder.
2. Get image thumbnail public URL.
3. Replace 'resize' parameter in the URL with necessary width and/or height. (Default thumbnail size is 220px).
4. Download resized thumbnail from the Google Drive.

See example here: https://github.com/dobromyslov/google-drive-utils/blob/511c44c2c48862b47c60038423b7f71bf1d28f49/src/index.ts#L150

And beware of GDrive quotas:

• queries per day: 1000000000
• queries per 100 sec per user: 1000
• queries per 100 sec: 10000

Answer 3

I have recently started developing an image processing module for NodeJS without any runtime dependencies (read why). It's still at early stages, but already usable.

What you are asking for would be done as follows:

image.resize(200, 200, function(err, image){
    // encode resized image to jpeg and get a Buffer object
    image.toBuffer('jpg', function(err, buffer){
        // save buffer to disk / send over network / etc.
    });
});

More info at the module's Github repo.

Answer 4

I was using lwip (as previously suggested by arvind) but switched to png-crop. It seems to work a little faster for me (Win 8.1 x64, Node v0.12.7). The code in the repo looks incredibly lightweight, and operationally it's simple to use.

var pngcrop = require('png-crop');
var config = {left: 10, top: 100, height: 150, width: 150};
pngcrop.crop('cats.png','cats-cropped.png',config);

Of course, it'll only do png files...

Answer 5

Take a look at lwip : https://github.com/EyalAr/lwip

Very simple and easy to use

npm install lwip

and then in your node code,

// obtain an image object:
require('lwip').open('image.jpg', function(err, image){

  // check err...
  // define a batch of manipulations and save to disk as JPEG:
  image.batch()
    .scale(0.75)          // scale to 75%
    .rotate(45, 'white')  // rotate 45degs clockwise (white fill)
    .crop(200)            // crop a 200X200 square from center
    .blur(5)              // Gaussian blur with SD=5
    .writeFile('output.jpg', function(err){
      // check err...
      // done.
    });

});

I have successfully implemented this in my file uploader and it works like a charm.

Answer 6

You can do this using jimp (node_module)

Local Write:

Jimp.read(path) // this can be url or local location
      .then(image=> {
          image
            .resize(size, Jimp.AUTO) // jimp.AUTO automatically sets the width so that the image doesnot looks odd
            .write('path-to-save');
      })
      .catch(err => {
        console.log(err);
      });

To upload to s3 or where ever you like.

Jimp.read(urls) // this can be url or local location
          .then(image=> {
              image
                .resize(size, Jimp.AUTO) // jimp.AUTO automatically sets the width so that the image doesnot looks odd
                .getBase64(Jimp.AUTO, (err, res) => {
                  const buf = new Buffer(
                    res.replace(/^data:image\/\w+;base64,/, ""),
                    "base64"
                  );
                  var data = {
                    Key: key,
                    Bucket: bucket,
                    Body: body,
                    ContentEncoding: "base64",
                    ContentType: "image/jpeg"
                  };
                  s3.putObject(data, function(err, data) {
                    if (err) {
                      throw err;
                    } else {
                      console.log("succesfully uploaded the image!");
                    }
                  });
                });
          })
          .catch(err => {
            console.log(err);
          });