How to Crop an Image in JavaScript Using HTML Canvas
To crop an image in JavaScript, we can make use of the HTML canvas element. The canvas element is available in HTML5. To display and crop the image on the canvas, we can use the drawImage() function. The drawImage() function takes a minimum of three parameters and a maximum of nine parameters.
There is something called a context with the help of which we can draw anything on canvas. You can consider it as a pen using which you can draw over the canvas. The context provides us with a method called drawImage() that draws the contents on the screen. Let’s now see the step-by-step process to crop an image in JavaScript.
Crop an Image in JavaScript Using HTML5 canvas Element
A canvas in HTML 5 is nothing but a blank area inside which we can draw anything we want. To add a canvas inside the HTML code, we can use a canvas tag with an id of canvas, and to this canvas element, we can also specify its dimensions (in this case, width: 1000px and height: 500px) as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000px" height="500px"></canvas>
<script src="./script.js"></script>
</body>
</html>
At the end of the body tag, we have linked our script file inside which we will be writing our JavaScript code.
Inside our JavaScript we have created a function called cropImg() . Within this function, we are getting the HTML canvas element using document.getElementById() and storing it inside the canvas variable. Since we want to draw an image on this canvas, which is a two-dimensional image, we will first get the context of our canvas element using the getContext() function, and as an argument to this function, we will pass 2d. And to store this context, we have created another variable called ctx.
To learn about getContext() function and its properties you can visit and read the MDN docs. At this stage, this is how our code looks like.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
}
}
Now that we have the canvas set up and we have the context ctx ready, we can start cropping and drawing the image.
Let’s now create an image tag using the Image() constructor and store it inside a variable image. Then we can link an image to the image using the src property. For this tutorial, we will be taking the URL of an image from the internet (Unsplash.com) and then adding it to the source property as a string shown below.
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
To crop and draw the image on the canvas we have to make sure that our image is already loaded completely. For this, we can use the onload function on the image. The code written inside this function will only be executed after the image is completely loaded.
As we have previously seen in this article that the context provides us with a function called drawImage() for drawing images on the canvas. We have to pass some inputs to this function depending on how we want the final image to look. Since we want to crop an image, we want to display only a specific part of that image on the browser and exclude the remaining stuff, we have to pass 9 parameters to the drawImage() function. And the parameters are as follows.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Parameters:
image- The image itself that we want to crop and display on the browser.sx(source image x-axis) - This parameter says from where you want to clip or start cropping the image from the x-axis.sy(source image y-axis) - This parameter says from where you want to clip or start cropping the image from the y-axis.sWidth- The width of the image starting from sx.sHeight- The height of the image starting from sy.dx- The point from which to start drawing the image on the screen from the x-axis.dy- The point from which to start drawing the image on the screen from the y-axis.dWidth- The length of the images that should be displayed on the screen.dHeight- The height of the images that should be displayed on the screen.
The image below illustrates the sx, sy, and sWidth parameters used to crop or clip the image.
After we have clipped the image, to show it on the browser window, we use dx, dy, dWidth and dHeight parameters.
Now you can pass parameters to this function depending on how and where you want to show the image. In this example, we have passed image, 150, 200, 500, 300, 60,60, 500, 300 these nine values to our drawImage() function. You can tweak these values depending upon the desired output which you want. In the end, your code will look something like this. Don’t forget to call the cropImg() function inside your code.
function cropImg() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
var image = new Image();
image.src =
'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80';
image.onload = function() {
ctx.drawImage(image, 150, 200, 500, 300, 60, 60, 500, 300);
}
}
cropImg();
This is the entire procedure to crop an image in JavaScript using the HTML 5 canvas element. This is the most popular and widely used approach when it comes to cropping an image in JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn