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?

We can install and use the sharp image library to easily crop images in NodeJS.

  • npm i sharp
  • const sharp = require("sharp");
  • sharp("IMG.JPG").resize(100, 100).toFile("SAVE.JPG");

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

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • A copy of the Sharp image library is not included in the zip file. Download the latest version using npm i sharp.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

CROP IMAGES IN NODEJS

All right, let us now get into the examples of cropping images in NodeJS, using the Sharp image library.

 

1) SIMPLE IMAGE CROP

1-simple.js
// (A) LOAD SHARP
const sharp = require("sharp");
 
// (B) OPEN IMAGE FILE
sharp("demo.webp")
 
// (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

2-more.js
// (A) LOAD SHARP
const sharp = require("sharp");
 
// (B) OPEN IMAGE FILE
sharp("demo.webp")
 
// (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

3-exact.js
// (A) LOAD SHARP
const sharp = require("sharp");
 
// (B) OPEN IMAGE FILE
sharp("demo.webp")
 
// (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().

 

 

EXTRA BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

OTHER IMAGE LIBRARIES

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

Crop Images In NodeJS (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *