Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to crop an image using canvas?
In this article, we will be discussing how to crop an image using canvas. When you crop an image, you essentially trim away parts of it to create a new image with a specific size or composition. This can be useful for various purposes, such as resizing an image to fit a specific frame or removing unwanted parts of an image.
Approaches
We have two different approaches to crop an image using canvas including the following −
Using the “drawImage()”
Using the “getImageData()”
Let us look at each step in detail.
Approach 1: Using the "drawImage() method"
The first approach is to crop an image using canvas as “drawImage()”. With the drawImage() approach, you can put an image on a canvas and then choose the specific part of the image that you want to crop. You do this by setting the crop dimensions as parameters in the drawImage() method.
Example
Following is an example to crop an image using canvas using “drawImage()”.
<!DOCTYPE html>
<html>
<head>
<title>Image Cropping Example</title>
</head>
<body>
<img id="myImage" src="https://images.unsplash.com/photo-1676629325155-fb45e86411c5?ixlib=rb4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="Original Image">
<canvas id="myCanvas"></canvas>
<script>
var img = new Image();
img.src= 'https://images.unsplash.com/photo-1676629325155-fb45e86411c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60';
img.onload = function() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 50, 90, 500, 500, 0, 0, 400, 350);
var croppedImg = canvas.toDataURL();
console.log(croppedImg);
};
</script>
</body>
</html>
Approach 2: Using the “getImageData() method"
The second approach is to crop an image using canvas as “getImageData()”. It lets you get the pixel data of a specific rectangular area of an image on a canvas, which you can use to create a new image with the cropped portion.It is useful when you want to perform more advanced image manipulations or analysis, such as changing the colors or applying filters to the cropped image.
Example
Following is an example to crop an image using canvas using the “getImageData() method”.
<!DOCTYPE html>
<html>
<head>
<title>Image Cropping Example</title>
</head>
<body>
<img id="myImage" src="https://images.unsplash.com/photo-1676629650907-d50f2f27db20?ixlib=rb4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="Original Image">
<canvas id="myCanvas"></canvas>
<script>
var img = new Image();
img.src= 'https://images.unsplash.com/photo-1676629650907-d50f2f27db20?ixlib=rb4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60';
img.onload = function() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 10, 30, 500, 500, 0, 0, 400, 350);
var imageData = ctx.getImageData(0, 0, 400, 350);
var croppedCanvas = document.createElement('canvas');
var croppedCtx = croppedCanvas.getContext('2d');
croppedCanvas.width = imageData.width;
croppedCanvas.height = imageData.height;
croppedCtx.putImageData(imageData, 0, 0);
var croppedImg = croppedCanvas.toDataURL();
console.log(croppedImg);
};
</script>
</body>
</html>
Conclusion
In this article, we examined two different approaches to crop an image using canvas. Here, we are using two different approaches “drawImage()” and the ”getImageData()”.The drawImage() approach is used to draw an entire image onto a canvas and then specify the portion of the image that you want to crop using the context's drawImage() method.the getImageData() method allows you to access and manipulate the pixel data of a specific rectangular area of an image on a canvas. . The two approaches each have their advantages and are used depending on the specific needs of the project.
1K+ Views
