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?

Can this be rephrased to be less subjective. "What is the best..." questions are typically not helpful. — zzzzBov, Oct 20 '11 at 17:05

score 26 · Accepted Answer · answered Dec 27 '10 at 19:55

26

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

answered Dec 27 '10 at 19:55

Travis

7,391
12
43
52

The node-imagemagick library works like a charm – Travis Dec 28 '10 at 18:00
Doesn't seem to work on Windows right now due to the lack of child_process on Windows :( – Sebastian Patten Feb 08 '12 at 04:00
6

Also, checkout gm which works with either imagemagick or graphicsmagick. It has a great chainable API, and it's actively supported. https://github.com/aheckmann/gm I'd add a new answer, but I can't since this question was closed. – Lance Fisher Nov 11 '12 at 06:00
It's pretty buggy library. – pronebird Aug 13 '13 at 17:06

score 20 · Answer 2 · answered Jun 24 '11 at 18:33

20

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:

https://i.stack.imgur.com/7pBly.png

answered Jun 24 '11 at 18:33

sak

2,612
24
55

2

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. – Benji XVI Aug 10 '11 at 17:14

score 6 · Answer 3 · edited Oct 01 '18 at 14:28

6

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.

edited Oct 01 '18 at 14:28

Johannes Buchholz

1,857
19
34

answered Oct 20 '11 at 17:01

Tyler Larson

261
3
4

score 4 · Answer 4 · answered Dec 27 '10 at 21:38

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!

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

4 Answers4

Linked