Jimp is a node image processing library with no external dependencies

If you’re using webpack you can set process.browser to true and your build of jimp will exclude certain parts, making it load faster.

{
  plugins: [
    new webpack.DefinePlugin({
      'process.browser': 'true'
    }),
    ...
  ],
}Copy the code

Once the promise is fulfilled, the following methods can be called on the image:

/* Resize */
image.contain( w, h[, alignBits || mode, mode] );    // scale the image to the given width and height, some parts of the image may be letter boxed
image.cover( w, h[, alignBits || mode, mode] );      // scale the image to the given width and height, some parts of the image may be clipped
image.resize( w, h[, mode] );     // resize the image. Jimp.AUTO can be passed as one of the values.
image.scale( f[, mode] );         // scale the image by the factor f
image.scaleToFit( w, h[, mode] ); // scale the image to the largest size that fits inside the given width and height

// An optional resize mode can be passed with all resize methods.

/* Crop */
image.autocrop([tolerance, frames]); // automatically crop same-color borders from image (if any), frames must be a Boolean
image.crop( x, y, w, h );         // crop to the given region

/* Composing */
image.blit( src, x, y[, srcx, srcy, srcw, srch] );
                                  // blit the image with another Jimp image at x, y, optionally cropped.
image.composite( src, x, y );     // composites another Jimp image over this image at x, y
image.mask( src, x, y );          // masks the image with another Jimp image at x, y using average pixel value
image.convolute( kernel );        // applies a convolution kernel matrix to the image or a region

/* Flip and rotate */
image.flip( horz, vert );         // flip the image horizontally or vertically
image.mirror( horz, vert );       // an alias for flip
image.rotate( deg[, mode] );      // rotate the image clockwise by a number of degrees. Optionally, a resize mode can be passed. If `false` is passed as the second parameter, the image width and height will not be resized.

/* Colour */
image.brightness( val );          // adjust the brighness by a value -1 to +1
image.contrast( val );            // adjust the contrast by a value -1 to +1
image.dither565();                // ordered dithering of the image and reduce color space to 16-bits (RGB565)
image.greyscale();                // remove colour from the image
image.invert();                   // invert the image colours
image.normalize();                // normalize the channels in an image

/* Alpha channel */
image.fade( f );                  // an alternative to opacity, fades the image by a factor 0 - 1. 0 will haven no effect. 1 will turn the image
image.opacity( f );               // multiply the alpha channel by each pixel by the factor f, 0 - 1
image.opaque();                   // set the alpha channel on every pixel to fully opaque
image.background( hex );          // set the default new pixel colour (e.g. 0xFFFFFFFF or 0x00000000) for by some operations (e.g. image.contain and

/* Blurs */
image.gaussian( r );              // Gaussian blur the image by r pixels (VERY slow)
image.blur( r );                  // fast blur the image by r pixels

/* Effects */
image.posterize( n );             // apply a posterization effect with n level
image.sepia();                    // apply a sepia wash to the image
image.pixelate( size[, x, y, w, h ]);  // apply a pixelation effect to the image or a region

/* 3D */
image.displace( map, offset );    // displaces the image pixels based on the provided displacement map. Useful for making stereoscopic 3D images.Copy the code

Some of these methods are irreversible, so it can be useful to perform them on a clone of the original image:

image.clone(); // returns a clone of the imageCopy the code

(Contributions of more methods are welcome!)

The following constants can be passed to the image.cover, image.contain and image.print methods:

Jimp.HORIZONTAL_ALIGN_LEFT;
Jimp.HORIZONTAL_ALIGN_CENTER;
Jimp.HORIZONTAL_ALIGN_RIGHT;

Jimp.VERTICAL_ALIGN_TOP;
Jimp.VERTICAL_ALIGN_MIDDLE;
Jimp.VERTICAL_ALIGN_BOTTOM;Copy the code

For example:

image.contain(250, 250, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_TOP);Copy the code

Default align modes for image.cover and image.contain are:

Jimp.HORIZONTAL_ALIGN_CENTER | Jimp.VERTICAL_ALIGN_MIDDLE;Copy the code

Default align modes for image.print are:

{
    alignmentX: Jimp.HORIZONTAL_ALIGN_LEFT,
    alignmentY: Jimp.VERTICAL_ALIGN_TOP
}Copy the code

Jimp.loadFont(path).then(function(font) {
    // load font from .fnt file
    image.print(font, x, y, str); // print a message on an image
    image.print(font, x, y, str, maxWidth); // print a message on an image with text wrapped at maxWidth
});Copy the code

Alignment modes are supported by replacing the str argument with an object containing text, alignmentX and alignmentY. alignmentX defaults to Jimp.HORIZONTAL_ALIGN_LEFT and alignmentY defaults to Jimp.VERTICAL_ALIGN_TOP.

Jimp.loadFont(path).then(function(font) { image.print( font, x, y, { text: 'Hello world! ', alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER, alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE }, maxWidth, maxHeight ); // prints 'Hello world! ' on an image, middle and center-aligned });Copy the code

Jimp.loadFont( path, cb ); // using a callback pattern
Copy the code

BMFont fonts are raster based and fixed in size and colour. Jimp comes with a set of fonts that can be used on images:

Jimp.FONT_SANS_8_BLACK; // Open Sans, 8px, black
Jimp.FONT_SANS_10_BLACK; // Open Sans, 10px, black
Jimp.FONT_SANS_12_BLACK; // Open Sans, 12px, black
Jimp.FONT_SANS_14_BLACK; // Open Sans, 14px, black
Jimp.FONT_SANS_16_BLACK; // Open Sans, 16px, black
Jimp.FONT_SANS_32_BLACK; // Open Sans, 32px, black
Jimp.FONT_SANS_64_BLACK; // Open Sans, 64px, black
Jimp.FONT_SANS_128_BLACK; // Open Sans, 128px, black

Jimp.FONT_SANS_8_WHITE; // Open Sans, 8px, white
Jimp.FONT_SANS_16_WHITE; // Open Sans, 16px, white
Jimp.FONT_SANS_32_WHITE; // Open Sans, 32px, white
Jimp.FONT_SANS_64_WHITE; // Open Sans, 64px, white
Jimp.FONT_SANS_128_WHITE; // Open Sans, 128px, whiteCopy the code

These can be used as follows:

Jimp.loadFont(Jimp.FONT_SANS_32_BLACK).then(function(font) { image.print(font, 10, 10, 'Hello world! '); });Copy the code

Online tools are also available to convert TTF fonts to BMFont format (e.g. Littera).

The image can be written to disk in PNG, JPEG or BMP format (based on the save path extension or if no extension is provided the original image’s MIME type which, if not available, defaults to PNG) using:

image.write(path, cb); // Node-style callback will be fired when write is successful
image.writeAsync(path); // Returns PromiseCopy the code

The original extension for an image (or “png”) can accessed as using image.getExtension(). The following will save an image using its original format:

var file = 'new_name.' + image.getExtension();
//or 
var file = 'new_name' // with no extension
image.write(file);Copy the code

A Base64 data URI can be generated in the same way as a Buffer, using:

image.getBase64(mime, cb); // Node-style callback will be fired with result
image.getBase64Async(mime); // Returns PromiseCopy the code

Implement emboss effect:

image.convolute([[-2, -1, 0], [-1, 1, 1], [0, 1, 2]]);Copy the code

If you want to begin with an empty Jimp image, you can call the Jimp constructor passing the width and height of the image to create and a Node-style callback:

new Jimp(256, 256, function(err, image) {
    // this image is 256 x 256, every pixel is set to 0x00000000
});Copy the code

You can optionally set the pixel colour as follows:

new Jimp(256, 256, 0xff0000ff, function(err, image) {
    // this image is 256 x 256, every pixel is set to 0xFF0000FF
});Copy the code

image.hash(); // aHgG4GgoFjACopy the code

By default the hash is returned as base 64. The hash can be returned at another base by passing a number from 2 to 64 to the method:

image.hash(2); / / 1010101011010000101010000100101010010000011001001001010011100100Copy the code

There are 18446744073709551615 unique hashes. The hamming short between The binary representation of these hashes can be used to find similar-looking images.

To calculate the hamming distance between two Jimp images based on their perceptual hash use:

Jimp.distance(image1, image2); // returns a number 0-1, where 0 means the two images are perceived to be identicalCopy the code

Jimp also allows the diffing of two Jimp images using PixelMatch as follows:

var diff = Jimp.diff(image1, image2, threshold); // Threshold ranges 0-1 (default: 0.1) diff. Image; // a Jimp image showing differences diff.percent; // the proportion of different pixels (0-1), where 0 means the images are pixel identicalCopy the code

Using a mix of hamming distance and pixel diffing to compare images, the following code has a 99% success rate of detecting the same image from a random sample (with 1% false positives). The test this figure is drawn from attempts to match each image from a sample of 120 PNGs against 120 corresponding JPEGs saved at a quality setting of 60.

var distance = Jimp.distance(png, jpeg); // perceived distance var diff = Jimp.diff(png, jpeg); / / pixel difference if (short < 0.15 | | diff. Percent < 0.15) {/ / images match} else {/ / not a match}Copy the code

Basically clone, change, test, push and pull request.

Please read the CONTRIBUTING documentation.

Jimp is licensed under the MIT license. Open Sans is licensed under the Apache license

⭐️ merge-IMg-merge multiple images into a single image

⭐️ postCSS-ego-image-provide a gradient fallback for an image that loosely resembles the original.

⭐️ differencify-perceptual Diffing tool

⭐️ gifwrap – A Jimp-compatible library for working with GIFs