How To Crop Images In NodeJS (Simple Examples)

Welcome to a tutorial on how to crop images in NodeJS. In client-side (browser) Javascript, we have access to the Canvas API and can do all sorts of image yoga with it. But just how do we crop an image in NodeJS then?

That covers the quick basics, but read on if you need more examples!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

QUICK SETUP

Run npm i sharp to install the required modules.

 

1) SIMPLE IMAGE CROP

// (A) LOAD SHARP
const sharp = require("sharp");
 
// (B) OPEN IMAGE FILE
sharp("demo.png")
 
// (C) CROP 150 X 150 SQUARE FROM CENTER
.resize(150, 150)
 
// (D) SAVE TO FILE
.toFile("demoA.png")
 
// (E) OPTIONAL - ON OK & HANDLE ERRORS
.then(info => console.log(info))
.catch(err => console.log(err));

This is the exact same as the introduction snippet, except for a few more extras.

1. Self-explanatory. Load the Sharp library.
2. Open the image.
3. Take note, we crop the image using resize(). Yes, this will extract to your specified dimensions with the center of the image as the reference point.
4. Save to file – This can be jpg, gif, png, webp, tiff.
5. Optional. Do something on success, or handle the error.

 

 

2) MORE IMAGE CROP OPTIONS

// (A) LOAD SHARP
const sharp = require("sharp");
 
// (B) OPEN IMAGE FILE
sharp("demo.png")
 
// (C) CROP
.resize(150, 150, {
  // cover | contain | fill
  fit: "cover",
  // top | right top | right bottom | left top | left bottom
  position: "left top"
})
 
// (D) SAVE TO FILE
.jpeg({ quality: 30 }) // optional
.toFile("demoB.jpg")
 
// (E) OPTIONAL - ON OK & HANDLE ERRORS
.then(info => console.log(info))
.catch(err => console.log(err));

• (C) For you guys who don’t want to crop from the center, just provide a position.
• (D) To set the quality for JPG files, we can add a jpeg({ quality: 30 }) pipe before saving it.

 

 

3) CROP EXACT LOCATION

// (A) LOAD SHARP
const sharp = require("sharp");
 
// (B) OPEN IMAGE FILE
sharp("demo.png")
 
// (C) EXTRACT FROM SPECIFIED COORDINATES
.extract({
  left: 230, top: 80,
  width: 150, height: 150
})
 
// (D) SAVE TO FILE
.toFile("demoC.png")

// (E) OPTIONAL - ON OK & HANDLE ERRORS
.then(info => console.log(info))
.catch(err => console.log(err));

Lastly, if you want to crop “very exact pixels” – Don’t use resize(), use extract().

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

LINKS & REFERENCES

• Sharp – GitHub
• Sharp Resize Image

 

OTHER IMAGE LIBRARIES

• Image Magick
• JIMP

If you don’t like Sharp, there are other image libraries in NodeJS. But since Sharp claims to be the fastest, I will take their word for it.

 

INFOGRAPHIC CHEAT SHEET