What would be a good way to resize an image in either node or browser-side JavaScript?

Question

I'm uploading some image files (format can vary, though I can probably restrict it if need be) to my server and storing them in a database as a base64 encoded string. I'd like to create thumbnails from these images, so that I'm not pulling down the full image when I only need a preview.

Most of the solutions out there involve reading from and writing to paths, but I've got my data in memory. Is there a JavaScript or Node.js library or technique out there for shrinking files as byte arrays or base64 strings?

Thank you.

Answer 1

Try the imagemagick node library. It has all kinds of image manipulation functions. Here's a link:

node-imagemagick

Also, this post on generating thumbnails efficiently with imagemagick would help, I imagine.

Answer 2

I experimented a bit with node-canvas, which has the added benefit that it is mostly the same as HTML5 canvas. You could use the same drawImage API either with node or client-side.

The node-canvas Readme has also an example on how to do image-resizing.

fs.readFile(__dirname + '/images/squid.png', function(err, squid){
  if (err) throw err;
  img = new Image;
  img.src = squid;
  ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4);
});

You don't need to read or write the image from disk, of course.