gm vs canvas vs image-size vs jimp vs sharp
Image Processing Libraries
gmcanvasimage-sizejimpsharpSimilar Packages:

Image Processing Libraries

Image processing libraries in Node.js provide developers with tools to manipulate and analyze images programmatically. These libraries facilitate tasks such as resizing, cropping, filtering, and format conversion, enabling dynamic image generation and optimization for web applications. They are essential for applications that require image manipulation on the server side, such as content management systems, e-commerce platforms, and social media applications. Each library has its unique strengths, making it crucial to choose the right one based on project requirements and performance considerations.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
gm647,7356,979121 kB368a year agoMIT
canvas010,650469 kB4582 months agoMIT
image-size02,215378 kB49a year agoMIT
jimp0-4.03 MB-a year agoMIT
sharp031,949534 kB1204 months agoApache-2.0

Feature Comparison: gm vs canvas vs image-size vs jimp vs sharp

Performance

  • gm:

    GraphicsMagick is optimized for batch processing and can handle multiple images simultaneously, making it efficient for tasks that require processing large sets of images. However, it may not be as fast as sharp for single-image operations.

  • canvas:

    Canvas provides a flexible drawing API but may not be the fastest option for heavy image processing tasks due to its reliance on the CPU for rendering operations. Performance can vary based on the complexity of the graphics being drawn.

  • image-size:

    Image-size is extremely lightweight and performs exceptionally well for its intended purpose of extracting dimensions, ensuring minimal overhead and fast execution times.

  • jimp:

    Jimp is easy to use but may not be the fastest option for large images or complex operations, as it is a pure JavaScript implementation. Performance can degrade with larger images or more intensive processing tasks.

  • sharp:

    Sharp is one of the fastest image processing libraries available in Node.js, leveraging libvips for efficient memory usage and speed. It is well-suited for production environments where performance is critical.

Ease of Use

  • gm:

    GM offers a straightforward API that abstracts many complexities of image processing, making it accessible for developers who need to perform common tasks without deep knowledge of image manipulation.

  • canvas:

    Canvas has a steeper learning curve due to its extensive API for drawing and rendering, making it more suitable for developers familiar with graphics programming.

  • image-size:

    Image-size is extremely easy to use, providing a simple interface for retrieving image dimensions and metadata with minimal setup required.

  • jimp:

    Jimp is designed for simplicity and ease of use, with a clear and intuitive API that allows developers to perform basic image manipulations quickly and efficiently.

  • sharp:

    Sharp has a well-documented API that balances performance with usability, making it relatively easy to integrate into applications while still offering advanced features.

Supported Formats

  • gm:

    GraphicsMagick supports an extensive list of image formats, including less common ones, making it a good choice for applications that need to handle diverse image types.

  • canvas:

    Canvas supports a wide range of image formats for input and output, including PNG, JPEG, and GIF, making it versatile for various applications.

  • image-size:

    Image-size is limited to extracting dimensions and metadata, but it can work with various formats as long as they are supported by the underlying libraries.

  • jimp:

    Jimp supports common formats like PNG and JPEG, but may not handle as many formats as other libraries, which can limit its use in some scenarios.

  • sharp:

    Sharp supports a wide variety of image formats, including PNG, JPEG, WebP, and TIFF, making it suitable for applications that require flexibility in image handling.

Dependency Management

  • gm:

    GM is a wrapper around GraphicsMagick, which may require installation of the underlying GraphicsMagick library, adding complexity to the setup process.

  • canvas:

    Canvas requires native dependencies and may involve additional setup steps, which can complicate installation in some environments, especially on Windows.

  • image-size:

    Image-size is a pure JavaScript library with no native dependencies, making it easy to install and use across different environments without additional configuration.

  • jimp:

    Jimp is also a pure JavaScript library, ensuring easy installation and compatibility across platforms without the need for native binaries.

  • sharp:

    Sharp has native dependencies but provides pre-built binaries for various platforms, simplifying installation while still requiring some system-level configuration.

Image Manipulation Capabilities

  • gm:

    GM provides a wide range of image manipulation capabilities, including resizing, cropping, and format conversion, making it versatile for many image processing tasks.

  • canvas:

    Canvas excels in custom drawing and rendering, allowing for complex graphics and animations, making it suitable for applications that require artistic rendering.

  • image-size:

    Image-size is limited to retrieving dimensions and metadata, lacking manipulation capabilities, which makes it unsuitable for tasks requiring image editing.

  • jimp:

    Jimp offers a good range of basic image manipulation functions, such as resizing, cropping, and filtering, making it suitable for simple tasks but not for advanced processing.

  • sharp:

    Sharp provides extensive image manipulation capabilities, including resizing, rotation, and format conversion, with a focus on performance and efficiency, making it ideal for high-demand applications.

How to Choose: gm vs canvas vs image-size vs jimp vs sharp

  • gm:

    Choose gm (GraphicsMagick) if you need a simple interface for image processing with a wide range of supported formats and operations. It is particularly useful for batch processing images and executing complex transformations without deep knowledge of image processing.

  • canvas:

    Choose canvas if you need a powerful 2D drawing API that closely resembles the HTML5 canvas element, allowing for complex graphics and image manipulation. It is ideal for applications that require custom rendering and drawing operations.

  • image-size:

    Choose image-size if you only need to extract dimensions and metadata from images without any manipulation. It is lightweight and efficient for quickly obtaining image sizes, making it suitable for applications that require minimal overhead.

  • jimp:

    Choose jimp for a pure JavaScript solution that is easy to use and does not require native dependencies. It is great for simple image manipulations and is particularly useful for projects that prioritize ease of installation and cross-platform compatibility.

  • sharp:

    Choose sharp for high-performance image processing, especially when dealing with large images or requiring fast transformations. It is built on libvips, making it extremely efficient in terms of speed and memory usage, ideal for production environments.

README for gm

gm Build Status NPM Version

GraphicsMagick and ImageMagick for node

Bug Reports

When reporting bugs please include the version of graphicsmagick/imagemagick you're using (gm -version/convert -version) as well as the version of this module and copies of any images you're having problems with.

Getting started

First download and install GraphicsMagick or ImageMagick. In Mac OS X, you can simply use Homebrew and do:

brew install imagemagick
brew install graphicsmagick

then either use npm:

npm install gm

or clone the repo:

git clone git://github.com/aheckmann/gm.git

Use ImageMagick instead of gm

Subclass gm to enable ImageMagick 7+

const fs = require('fs')
const gm = require('gm').subClass({ imageMagick: '7+' });

Or, to enable ImageMagick legacy mode (for ImageMagick version < 7)

const fs = require('fs')
const gm = require('gm').subClass({ imageMagick: true });

Specify the executable path

Optionally specify the path to the executable.

const fs = require('fs')
const gm = require('gm').subClass({
  appPath: String.raw`C:\Program Files\ImageMagick-7.1.0-Q16-HDRI\magick.exe`
});

Basic Usage

var fs = require('fs')
  , gm = require('gm');

// resize and remove EXIF profile data
gm('/path/to/my/img.jpg')
.resize(240, 240)
.noProfile()
.write('/path/to/resize.png', function (err) {
  if (!err) console.log('done');
});

// some files would not be resized appropriately
// http://stackoverflow.com/questions/5870466/imagemagick-incorrect-dimensions
// you have two options:
// use the '!' flag to ignore aspect ratio
gm('/path/to/my/img.jpg')
.resize(240, 240, '!')
.write('/path/to/resize.png', function (err) {
  if (!err) console.log('done');
});

// use the .resizeExact with only width and/or height arguments
gm('/path/to/my/img.jpg')
.resizeExact(240, 240)
.write('/path/to/resize.png', function (err) {
  if (!err) console.log('done');
});

// obtain the size of an image
gm('/path/to/my/img.jpg')
.size(function (err, size) {
  if (!err)
    console.log(size.width > size.height ? 'wider' : 'taller than you');
});

// output all available image properties
gm('/path/to/img.png')
.identify(function (err, data) {
  if (!err) console.log(data)
});

// pull out the first frame of an animated gif and save as png
gm('/path/to/animated.gif[0]')
.write('/path/to/firstframe.png', function (err) {
  if (err) console.log('aaw, shucks');
});

// auto-orient an image
gm('/path/to/img.jpg')
.autoOrient()
.write('/path/to/oriented.jpg', function (err) {
  if (err) ...
})

// crazytown
gm('/path/to/my/img.jpg')
.flip()
.magnify()
.rotate('green', 45)
.blur(7, 3)
.crop(300, 300, 150, 130)
.edge(3)
.write('/path/to/crazy.jpg', function (err) {
  if (!err) console.log('crazytown has arrived');
})

// annotate an image
gm('/path/to/my/img.jpg')
.stroke("#ffffff")
.drawCircle(10, 10, 20, 10)
.font("Helvetica.ttf", 12)
.drawText(30, 20, "GMagick!")
.write("/path/to/drawing.png", function (err) {
  if (!err) console.log('done');
});

// creating an image
gm(200, 400, "#ddff99f3")
.drawText(10, 50, "from scratch")
.write("/path/to/brandNewImg.jpg", function (err) {
  // ...
});

Streams

// passing a stream
var readStream = fs.createReadStream('/path/to/my/img.jpg');
gm(readStream, 'img.jpg')
.write('/path/to/reformat.png', function (err) {
  if (!err) console.log('done');
});


// passing a downloadable image by url

var request = require('request');
var url = "www.abc.com/pic.jpg"

gm(request(url))
.write('/path/to/reformat.png', function (err) {
  if (!err) console.log('done');
});


// can also stream output to a ReadableStream
// (can be piped to a local file or remote server)
gm('/path/to/my/img.jpg')
.resize('200', '200')
.stream(function (err, stdout, stderr) {
  var writeStream = fs.createWriteStream('/path/to/my/resized.jpg');
  stdout.pipe(writeStream);
});

// without a callback, .stream() returns a stream
// this is just a convenience wrapper for above.
var writeStream = fs.createWriteStream('/path/to/my/resized.jpg');
gm('/path/to/my/img.jpg')
.resize('200', '200')
.stream()
.pipe(writeStream);

// pass a format or filename to stream() and
// gm will provide image data in that format
gm('/path/to/my/img.jpg')
.stream('png', function (err, stdout, stderr) {
  var writeStream = fs.createWriteStream('/path/to/my/reformatted.png');
  stdout.pipe(writeStream);
});

// or without the callback
var writeStream = fs.createWriteStream('/path/to/my/reformatted.png');
gm('/path/to/my/img.jpg')
.stream('png')
.pipe(writeStream);

// combine the two for true streaming image processing
var readStream = fs.createReadStream('/path/to/my/img.jpg');
gm(readStream)
.resize('200', '200')
.stream(function (err, stdout, stderr) {
  var writeStream = fs.createWriteStream('/path/to/my/resized.jpg');
  stdout.pipe(writeStream);
});

// GOTCHA:
// when working with input streams and any 'identify'
// operation (size, format, etc), you must pass "{bufferStream: true}" if
// you also need to convert (write() or stream()) the image afterwards
// NOTE: this buffers the readStream in memory!
var readStream = fs.createReadStream('/path/to/my/img.jpg');
gm(readStream)
.size({bufferStream: true}, function(err, size) {
  this.resize(size.width / 2, size.height / 2)
  this.write('/path/to/resized.jpg', function (err) {
    if (!err) console.log('done');
  });
});

Buffers

// A buffer can be passed instead of a filepath as well
var buf = require('fs').readFileSync('/path/to/image.jpg');

gm(buf, 'image.jpg')
.noise('laplacian')
.write('/path/to/out.jpg', function (err) {
  if (err) return handle(err);
  console.log('Created an image from a Buffer!');
});

/*
A buffer can also be returned instead of a stream
The first argument to toBuffer is optional, it specifies the image format
*/
gm('img.jpg')
.resize(100, 100)
.toBuffer('PNG',function (err, buffer) {
  if (err) return handle(err);
  console.log('done!');
})

Custom Arguments

If gm does not supply you with a method you need or does not work as you'd like, you can simply use gm().in() or gm().out() to set your own arguments.

  • gm().command() - Custom command such as identify or convert
  • gm().in() - Custom input arguments
  • gm().out() - Custom output arguments

The command will be formatted in the following order:

  1. command - ie convert
  2. in - the input arguments
  3. source - stdin or an image file
  4. out - the output arguments
  5. output - stdout or the image file to write to

For example, suppose you want the following command:

gm "convert" "label:Offline" "PNG:-"

However, using gm().label() may not work as intended for you:

gm()
.label('Offline')
.stream();

would yield:

gm "convert" "-label" "\"Offline\"" "PNG:-"

Instead, you can use gm().out():

gm()
.out('label:Offline')
.stream();

which correctly yields:

gm "convert" "label:Offline" "PNG:-"

Custom Identify Format String

When identifying an image, you may want to use a custom formatting string instead of using -verbose, which is quite slow. You can use your own formatting string when using gm().identify(format, callback). For example,

gm('img.png').format(function (err, format) {

})

// is equivalent to

gm('img.png').identify('%m', function (err, format) {

})

since %m is the format option for getting the image file format.

Platform differences

Please document and refer to any platform or ImageMagick/GraphicsMagick issues/differences here.

Examples:

Check out the examples directory to play around. Also take a look at the extending gm page to see how to customize gm to your own needs.

Constructor:

There are a few ways you can use the gm image constructor.

    1. gm(path) When you pass a string as the first argument it is interpreted as the path to an image you intend to manipulate.
    1. gm(stream || buffer, [filename]) You may also pass a ReadableStream or Buffer as the first argument, with an optional file name for format inference.
    1. gm(width, height, [color]) When you pass two integer arguments, gm will create a new image on the fly with the provided dimensions and an optional background color. And you can still chain just like you do with pre-existing images too. See here for an example.

The links below refer to an older version of gm but everything should still work, if anyone feels like updating them please make a PR

Methods

compare

Graphicsmagicks compare command is exposed through gm.compare(). This allows us to determine if two images can be considered "equal".

Currently gm.compare only accepts file paths.

gm.compare(path1, path2 [, options], callback)
gm.compare('/path/to/image1.jpg', '/path/to/another.png', function (err, isEqual, equality, raw, path1, path2) {
  if (err) return handle(err);

  // if the images were considered equal, `isEqual` will be true, otherwise, false.
  console.log('The images were equal: %s', isEqual);

  // to see the total equality returned by graphicsmagick we can inspect the `equality` argument.
  console.log('Actual equality: %d', equality);

  // inspect the raw output
  console.log(raw);

  // print file paths
  console.log(path1, path2);
})

You may wish to pass a custom tolerance threshold to increase or decrease the default level of 0.4.

gm.compare('/path/to/image1.jpg', '/path/to/another.png', 1.2, function (err, isEqual) {
  ...
})

To output a diff image, pass a configuration object to define the diff options and tolerance.

var options = {
  file: '/path/to/diff.png',
  highlightColor: 'yellow',
  tolerance: 0.02
}
gm.compare('/path/to/image1.jpg', '/path/to/another.png', options, function (err, isEqual, equality, raw) {
  ...
})

composite

GraphicsMagick supports compositing one image on top of another. This is exposed through gm.composite(). Its first argument is an image path with the changes to the base image, and an optional mask image.

Currently, gm.composite() only accepts file paths.

gm.composite(other [, mask])
gm('/path/to/image.jpg')
.composite('/path/to/second_image.jpg')
.geometry('+100+150')
.write('/path/to/composite.png', function(err) {
    if(!err) console.log("Written composite image.");
});

montage

GraphicsMagick supports montage for combining images side by side. This is exposed through gm.montage(). Its only argument is an image path with the changes to the base image.

Currently, gm.montage() only accepts file paths.

gm.montage(other)
gm('/path/to/image.jpg')
.montage('/path/to/second_image.jpg')
.geometry('+100+150')
.write('/path/to/montage.png', function(err) {
    if(!err) console.log("Written montage image.");
});

Contributors

https://github.com/aheckmann/gm/contributors

Inspiration

http://github.com/quiiver/magickal-node

Plugins

https://github.com/aheckmann/gm/wiki

Tests

npm test

To run a single test:

npm test -- alpha.js

License

(The MIT License)

Copyright (c) 2010 Aaron Heckmann

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.