What packages are available for node.js to do image cropping?

Question

I'm creating a website using node.js. I have seen many libraries mentioned that piggy back on top of imagemagick etc. There is a list here: https://github.com/ry/node/wiki/modules#graphics

What I'm trying to do is take the image that a user uploads, crop it/size it to certain dimensions the site requires. What is the best/most active script to do this? I'd like one with npm support. Does anyone have actual experience using some of these?

Solution 1

Think I found a decent imagemagick wrapper that can handle this pretty well. Even in memory before writing the file to disk. (aka user upload -> node imagemagick lib -> cdn and never touching the disk ... which is what I want)

https://github.com/rsms/node-imagemagick

Solution 2

For anyone who is trying to do decide between Canvas and ImageMagick, I just tried both for comparison, and I'm getting much better results from imagemagick. Here's an image that was resized and cropped from 1024x768 to 128x128:

http://i.imgur.com/tfeft.png

Solution 3

If you need to be able to draw or do effects on your images maybe you will still need canvas or ImageMagick but in terms of speed and memory usage there are a few better options.

Here is a benchmark of a few different image libraries.

https://github.com/libvips/libvips/wiki/Speed-and-memory-use

ImageMagick is slow and consumes lots of memory.

Try Vips, which is used by the sharp library.

Solution 4

I've used node-canvas from the LearnBoost folks - https://github.com/learnboost/node-canvas or npm install canvas - they are very responsive to issues and the library is well written and stable. I don't think you can create an image from memory yet but if node-imagemagick doesn't work out for you then it would be worth a try.

If you're familiar with the browser-side canvas API it should be straight forward to create an image from a file and draw it into a smaller canvas. There's an example of that here:

https://github.com/LearnBoost/node-canvas/blob/master/examples/resize.js

If you're familiar with C++ it's fairly easy to add methods to the native objects, the project built cleanly for me on Mac OS first time. The documentation for cairo, the graphics library that powers node-canvas, is quite clear too. I'd take a look at the load functions of the Image object to see if there's a way to load from a Node Buffer:

https://github.com/LearnBoost/node-canvas/blob/master/src/Image.h

https://github.com/LearnBoost/node-canvas/blob/master/src/Image.cc

Good luck!

View more solutions

Comments

[Travis]

The node-imagemagick library works like a charm

[Benji XVI]

Even better results can be achieved using IMagick with resizeImage(), using the imagick::FILTER_LANCZOS filter (advanced resampling algorithm), and sharpening set to around 0.9.

[Sebastian Patten]

Doesn't seem to work on Windows right now due to the lack of child_process on Windows :(

[Lance Fisher]

Also, checkout gm which works with either imagemagick or graphicsmagick. It has a great chainable API, and it's actively supported. github.com/aheckmann/gm I'd add a new answer, but I can't since this question was closed.

[pronebird]

It's pretty buggy library.