How to crop image in browser using JIMP?

July 26, 2020

2 min

I had a situation where I had no backend server to handle the crop and resizing of an image. I know of a few cloud services which could do this easily however they come with a cost. So I thought to implement the solution within the browser itself. Before we proceed, let we warn you that this might not be an optimal solution for a page with a lot of images and which might require the use of web worker to offload the task to worker threads.

So let’s start with the process of resizing the image using JIMP - The “JavaScript Image Manipulation Program” :-)

Step 1 - Load JIMP in browser

To load JIMP in browser we are going to use unpkg CDN. If you are not familiar with unpkg or how to load any npm package in browser, please refer to tutorial, How to load any npm module in browser

To load JIMP using unkpg, we create a script tag

Step 2 - Define markup for the original and cropped image

Next, we create simple markup where original and cropped images will be loaded

and little bit of styling :-)

Step 3 - Setting the source of the base image

Since we are going to use the same image source in HTML markup and JavaScript, I preferred to store the same in a JavaScript variable. In the future, if we want to change the image URL, it will be easy for us to swap this image with any other image by just changing the source at a single location.

Step 4 - Read/Load image with JIMP

Now coming to the interesting stuff let’s play with JIMP to crop the image.

First, we need to load the image with Jimp.read() method that returns a promise.

The Jimp.read() return Jimp object. If we log the image variable on the console, returned by Jimp.read() method we should see output something similar to below image

Jimp prototype chain contains a method crop which we will use in the next step to crop the image.

Step 5 - Crop image

Once we have Jimp object, we can pass the x, y, w, h as arguments to define crop region inside image.crop() method which would return Promise.

Once the Promise to crop an image is resolved, we can use then() method to get the base64 image using the method getBase64(). The getBase64() method accepts, mime and callback as first and second arguments respectively.

In the callback arrow function, we are setting a source of second image element that is stored in variable afterCrop.

Step 6 - Add the size of the image on top (optional)

This step is optional as I want to demonstrate how we can compare the size of the original with cropped one.

To display the dimension of the image, I used for loop to create a span element. The span element will be displayed on top of the existing images on the top left corner with the respective image size as the text.