Jimp is a JavaScript Image Manipulation Program which is an image processing library for node.js written entirely in JavaScript with 0 external or native dependencies.

I consider Jimp the best image processing or manipulation program because it efficient and easy to use module, also it provides a lot of features like resizing images(with resizing algorithms), cropping, scaling adding effects etc.

You can install this module from npm.

 npm install jimp 

Basic Example that resizes an image to 256×256.

var Jimp = require("jimp");

Jimp.read("filename.png", function (err, img) {
    if (err) throw err;
    img.resize(256, 256)            // resize
         .quality(60)                 // set JPEG quality ]
         .write("newname.jpg"); // save
});

Or Using Promises :

Jimp.read("filename.png").then(function(image){
	// do something with the image
}).catch(function(err){
	// do something with error
})

In the above examples the Jimp.read(filename) parameter can accept local image files or even image buffer or even a URL.

1. Contain

Contain function is used when we want the image to scale to given width and height and some parts of the image may be letter boxed.

image.contain(width,height)

2. Cover

Cover function is used when we want the image to a given width and height and some parts of the image may be automatically clipped to cover the resolution.

image.cover(width,height)

3. Scale

scale function is used when we want to scale the image to a given factor like twice(2) or half (0.5)

image.scale(factor)

4. Crop

Crop function is used when we want the image to crop to a given region.

image.crop(x,y,w,h)

5. Adding 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

6. Adding Some Text to the image

Jimp supports basic typography using BMFont format (.fnt) bitmap fonts
,they are raster based and fixed in size and color.

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, width); // print a message on an image with text wrapped at width
});

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

Default Set of fonts with jimp.

Jimp.FONT_SANS_8_BLACK;   // Open Sans, 8px, 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, white 

So this was some of the basic yet useful function that can use for your images and websites. This can be used with the batch processing functions that i posted earlier in this blog. With some modifications it will search for each and every image in the given directory and will process them.

Subscribe blog for more posts.

Subscribe my YouTube channel for more tutorials.

 

Advertisements