Top Related Projects
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
Content aware image cropping
Light Weight Image Processor for NodeJS
Capture website screenshots
Quick Overview
GraphicsMagick for Node.js is a powerful image processing library that provides a wrapper around the GraphicsMagick image processing system. It allows developers to manipulate images programmatically in Node.js applications, offering a wide range of operations such as resizing, cropping, format conversion, and more.
Pros
- Extensive set of image manipulation features
- High performance due to its C++ core
- Supports a wide variety of image formats
- Well-maintained and actively developed
Cons
- Requires GraphicsMagick to be installed on the system
- Learning curve for complex operations
- May have higher memory usage compared to some alternatives
- Limited browser support (primarily for server-side use)
Code Examples
Resizing an image:
const gm = require('gm');
gm('input.jpg')
.resize(300, 200)
.write('output.jpg', function (err) {
if (!err) console.log('Image resized successfully');
});
Adding a watermark to an image:
const gm = require('gm');
gm('input.jpg')
.draw('image Over 100,100 0,0 watermark.png')
.write('output.jpg', function (err) {
if (!err) console.log('Watermark added successfully');
});
Converting image format:
const gm = require('gm');
gm('input.jpg')
.setFormat('png')
.write('output.png', function (err) {
if (!err) console.log('Image converted to PNG');
});
Getting Started
-
Install GraphicsMagick on your system (e.g.,
brew install graphicsmagick
on macOS with Homebrew). -
Install the gm package in your Node.js project:
npm install gm
- Use the library in your JavaScript code:
const gm = require('gm');
gm('path/to/image.jpg')
.resize(200, 200)
.toBuffer('PNG', function (err, buffer) {
if (err) return console.error(err);
console.log('Resized image buffer:', buffer);
});
This example resizes an image to 200x200 pixels and converts it to a PNG buffer. Adjust the operations as needed for your specific use case.
Competitor Comparisons
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Pros of Sharp
- Significantly faster performance, especially for JPEG and WebP processing
- Native libvips bindings for better memory efficiency
- Supports a wider range of input formats, including HEIF and AVIF
Cons of Sharp
- Larger installation size due to libvips dependency
- Less extensive API compared to GM, which may require more code for complex operations
- Steeper learning curve for developers familiar with ImageMagick-style commands
Code Comparison
Sharp:
sharp(input)
.resize(300, 200)
.toFormat('webp')
.toFile('output.webp');
GM:
gm(input)
.resize(300, 200)
.write('output.webp');
Both libraries offer similar basic functionality, but Sharp's API is more focused on method chaining, while GM's API is closer to ImageMagick's command-line syntax. Sharp provides more granular control over output formats and optimization settings, while GM offers a broader range of image manipulation operations out of the box.
Sharp is generally preferred for high-performance, modern web applications, especially those dealing with large volumes of images. GM remains a solid choice for projects requiring extensive image manipulation capabilities or those already familiar with ImageMagick.
An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
Pros of Jimp
- Pure JavaScript implementation, no external dependencies required
- Works in both Node.js and browser environments
- Simpler API for basic image manipulation tasks
Cons of Jimp
- Limited functionality compared to GM's extensive feature set
- Slower performance for complex operations on large images
- Lacks support for some advanced image formats and operations
Code Comparison
Jimp Example
Jimp.read('input.jpg')
.then(image => {
return image
.resize(250, 250)
.quality(60)
.writeAsync('output.jpg');
})
.catch(err => {
console.error(err);
});
GM Example
gm('input.jpg')
.resize(250, 250)
.quality(60)
.write('output.jpg', function (err) {
if (err) console.error(err);
});
Both libraries offer similar basic functionality for resizing and adjusting image quality. Jimp uses a promise-based approach, while GM uses a more traditional callback style. GM generally provides more advanced options and finer control over image processing, but Jimp's pure JavaScript implementation makes it easier to use in various environments without additional system dependencies.
Content aware image cropping
Pros of smartcrop.js
- Specialized in intelligent content-aware image cropping
- Lightweight and can run in browsers, making it suitable for client-side processing
- Focuses on finding the most interesting part of the image for cropping
Cons of smartcrop.js
- Limited to cropping functionality, lacking broader image manipulation features
- May require additional libraries or tools for more complex image processing tasks
- Less mature and widely adopted compared to gm
Code Comparison
smartcrop.js:
smartcrop.crop(image, { width: 100, height: 100 }).then(function(result) {
console.log(result);
});
gm:
gm('path/to/image.jpg')
.resize(100, 100)
.write('path/to/resized.jpg', function (err) {
if (!err) console.log('Image resized');
});
Summary
While smartcrop.js excels in intelligent cropping, gm offers a more comprehensive set of image manipulation tools. smartcrop.js is ideal for projects requiring smart cropping in browser environments, whereas gm is better suited for server-side applications needing extensive image processing capabilities. The choice between the two depends on the specific requirements of your project and the environment in which it will be deployed.
Light Weight Image Processor for NodeJS
Pros of lwip
- Pure JavaScript implementation, no external dependencies required
- Lightweight and fast for basic image processing tasks
- Easy to install and use in Node.js environments
Cons of lwip
- Limited functionality compared to gm
- Lacks support for advanced image manipulations and formats
- Development seems to have slowed down (last commit in 2019)
Code Comparison
lwip:
lwip.open('input.jpg', function(err, image) {
image.scale(0.5, function(err, image) {
image.writeFile('output.jpg', function(err) {
// Image saved
});
});
});
gm:
gm('input.jpg')
.resize('50%')
.write('output.jpg', function(err) {
if (!err) console.log('Image resized');
});
Both libraries offer simple APIs for basic image manipulation, but gm provides a more extensive set of features and supports a wider range of image formats. lwip is a good choice for projects that require lightweight image processing without external dependencies, while gm is better suited for more complex image manipulation tasks and when working with various image formats.
Capture website screenshots
Pros of pageres
- Focused specifically on capturing screenshots of web pages
- Supports multiple resolutions and devices in a single command
- Includes CLI tool for easy use outside of Node.js applications
Cons of pageres
- Limited to web page screenshots, less versatile for general image manipulation
- Requires Puppeteer, which can be resource-intensive
- Less extensive image processing capabilities compared to gm
Code comparison
pageres:
const Pageres = require('pageres');
(async () => {
await new Pageres({delay: 2})
.src('https://github.com', ['1280x1024', '1920x1080'])
.dest(__dirname)
.run();
})();
gm:
var gm = require('gm');
gm('input.jpg')
.resize(240, 240)
.noProfile()
.write('output.jpg', function (err) {
if (!err) console.log('done');
});
Summary
pageres is specialized for capturing web page screenshots across multiple resolutions, while gm is a more general-purpose image manipulation library. pageres offers a simpler API for its specific use case but is less versatile. gm provides broader image processing capabilities but requires more setup for web page screenshots. The choice between them depends on the specific requirements of your project.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
gm
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 asidentify
orconvert
gm().in()
- Custom input argumentsgm().out()
- Custom output arguments
The command will be formatted in the following order:
command
- ieconvert
in
- the input argumentssource
- stdin or an image fileout
- the output argumentsoutput
- 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.
-
gm(path)
When you pass a string as the first argument it is interpreted as the path to an image you intend to manipulate.
-
gm(stream || buffer, [filename])
You may also pass a ReadableStream or Buffer as the first argument, with an optional file name for format inference.
-
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
-
getters
- size - returns the size (WxH) of the image
- orientation - returns the EXIF orientation of the image
- format - returns the image format (gif, jpeg, png, etc)
- depth - returns the image color depth
- color - returns the number of colors
- res - returns the image resolution
- filesize - returns image filesize
- identify - returns all image data available. Takes an optional format string.
-
manipulation
- adjoin
- affine
- antialias
- append
- authenticate
- autoOrient
- average
- backdrop
- bitdepth
- blackThreshold
- bluePrimary
- blur
- border
- borderColor
- box
- channel
- charcoal
- chop
- clip
- coalesce
- colors
- colorize
- colorMap
- colorspace
- comment
- compose
- compress
- contrast
- convolve
- createDirectories
- crop
- cycle
- deconstruct
- delay
- define
- density
- despeckle
- dither
- displace
- display
- dispose
- dissolve
- edge
- emboss
- encoding
- enhance
- endian
- equalize
- extent
- file
- filter
- flatten
- flip
- flop
- foreground
- frame
- fuzz
- gamma
- gaussian
- geometry
- gravity
- greenPrimary
- highlightColor
- highlightStyle
- iconGeometry
- implode
- intent
- interlace
- label
- lat
- level
- list
- limit
- log
- loop
- lower
- magnify
- map
- matte
- matteColor
- mask
- maximumError
- median
- minify
- mode
- modulate
- monitor
- monochrome
- morph
- mosaic
- motionBlur
- name
- negative
- noise
- noop
- normalize
- noProfile
- opaque
- operator
- orderedDither
- outputDirectory
- paint
- page
- pause
- pen
- ping
- pointSize
- preview
- process
- profile
- progress
- quality
- raise
- rawSize
- randomThreshold
- recolor
- redPrimary
- region
- remote
- render
- repage
- resample
- resize
- roll
- rotate
- sample
- samplingFactor
- scale
- scene
- scenes
- screen
- segment
- sepia
- set
- setFormat
- shade
- shadow
- sharedMemory
- sharpen
- shave
- shear
- silent
- solarize
- snaps
- stegano
- stereo
- strip imagemagick only
- spread
- swirl
- textFont
- texture
- threshold
- thumb
- tile
- transform
- transparent
- treeDepth
- trim
- type
- update
- units
- unsharp
- usePixmap
- view
- virtualPixel
- visual
- watermark
- wave
- whitePoint
- whiteThreshold
- window
- windowGroup
-
drawing primitives
-
image output
- write - writes the processed image data to the specified filename
- stream - provides a
ReadableStream
with the processed image data - toBuffer - returns the image as a
Buffer
instead of a stream
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.
Top Related Projects
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
Content aware image cropping
Light Weight Image Processor for NodeJS
Capture website screenshots
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot