Image Processing in Node.js Using Jimp Library

You are currently viewing Image Processing in Node.js Using Jimp Library

Welcome folks I am back with another blog post. In this blog post we will be talking about a open source library of Node JS ie. JIMP with the help of this library you can do some Complex image processing for example you can resize the image you can change the quality of the image or you can change grayscale of the image so we will be looking in this post various examples of this library so if you visit and pm package manager official website you will see that this package is very famous and it has almost 33000 weekly downloads so you will see that this package is a very popular package among Node JS developers so if you want to do any kind of image processing or if you want to build image processing applications then you can use this open source library it is totally free and the nice thing about this library is that in order to do this you only required this library you don’t require any other dependency because it is a native dependency of JavaScript or Node you can say so apart from this library you don’t need any other library in order to build image processing applications so let’s start by looking at some examples of this library.

 

 

Where to Download?

 

You can visit the Jimp Library Official Package repository at this Link

 

Installing via NPM

 

You can install the library JIMP by issuing a simple command in Node something shown below

 

 

What is JIMP?

 

The question arises in every person mind is that what the hell this JIMP and where it came from. JIMP stands for Javascript Image Manipulation Program. It is a Node module for image manipulation or processing which is written entirely in Javascript Language. No external dependencies is used to make it.

 

Advantages of JIMP

 

  • It is fast and flexible when it comes to processing and manipulation of images as it is entirely written in Javascript.
  • No 3rd Party Dependency is there when you use JIMP.
  • It contains native Javascript Code.
  • It is bug free.
  • It is a lightweight library.

 

Supported types:

  • @jimp/jpeg
  • @jimp/png
  • @jimp/bmp
  • @jimp/tiff
  • @jimp/gif

 

Commonly Used Cases

 

  1. Callback case

 

 

 

Explanation

  1. First of all we are including the library in the script
  2. Secondly we are using the read function in order to open the image file lenna.jpg.
  3. The Second argument in the read function specifies the err variable and the actual image file.
  4. After that we are checking the result of the method if any kind of error takes place then we simply throwing that error.
  5. If any error takes place then we just use the image which is stored in the lenna variable of the callback.
  6. Lastly we take the image apply some effects such as resize it, improve quality, apply greyscale and actually saves it to the computer.

 

Result of Above Code

When we actually execute the above code we get the following result which is shown below. We have the original image you can see but after applying the functions to it we get the another image with greyscale, resize and quality applied to it.

 

Original Image

 

 

Processed Image

 

 

  • The modified image has been resized to 256*256 pixels.
  • The modified image quality has been reduced to 60.
  • The modified image has less size. 60 kb reduced to 7kb.
  • The modified image has been applied greyscale effect.

 

Using Promises

 

You can also do the same thing by using promises also. Personally I will prefer this approach over callbacks. Because callbacks can get sometime hard to manage. Also with callbacks the code becomes messier and it becomes hard to code and also for someone to understand your code. So I will prefer you also use promises approach when using this library. The whole source code is shown below on how to use promises with this library.

 

 

TypeScript Usage

 

If you are making your application in Typescript. Then it becomes a hell lot easier in importing the library into your project. There are three methods available in Typescript when compared to Javascript. The methods are as follows.

 

  1. First Method is the import = require() method to import it as a CommonJS Module.

 

 

2.  Alternatively you can import it with ES6 default import scheme, if you set the esModuleInterop compiler flag to true in your tsconfig

 

 

3.  Lastly you can import it with a synthetic default import. This requires setting the allowSyntheticDefaultImports compiler option to true in your tsconfig

 

Module Build

 

If you’re using a web bundles (webpack, rollup, parcel) you can benefit from using the modulebuild of jimp. Using the module build will allow your bundler to understand your code better and exclude things you aren’t using.

 

 

WebPack

 

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.

 

 

Jimp Read Method Explanation

 

The static Jimp.read method takes the path to a file, URL, dimensions, a Jimp instance or a buffer and returns a Promise:

 

 

In some cases, you need to pass additional parameters with an image’s URL. You can pass an object to the Jimp.read method:

 

 

Methods Supported

 

There are a bunch of methods supported by this library which are as follows

 

 

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

 

 

Resize Modes

 

The default resizing algorithm uses a bilinear method as follows:

 

 

The other constants that we can use for the resizing algorithm are as follows:

 

 

Align modes

 

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

 

 

Compositing and blend modes

 

The following modes can be used for compositing two images together. mode defaults to Jimp.BLEND_SOURCE_OVER.

 

 

Writing text

 

 

 

Advanced usage

Colour manipulation

 

 

Comparing images

 

To generate a perceptual hash of a Jimp image, based on the pHash algorithm, use:

 

 

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:

 

 

Leave a Reply