Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to crop an image using canvas?
In this article, we will discuss how to crop an image using HTML5 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 resizing images to fit specific frames or removing unwanted parts of an image.
Approaches
We have two different approaches to crop an image using canvas ?
Using the drawImage() method
Using the getImageData() method
Let us look at each approach in detail.
Approach 1: Using the drawImage() Method
The drawImage() method allows you to draw an image on a canvas and specify which part of the image to crop by setting crop dimensions as parameters. This is the most straightforward approach for basic image cropping.
Syntax
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
Where sx, sy define the source crop position, sWidth, sHeight define the crop dimensions, and dx, dy, dWidth, dHeight define the destination position and size on canvas.
Example
Following is an example to crop an image using the drawImage() method
<!DOCTYPE html>
<html>
<head>
<title>Image Cropping with drawImage()</title>
<style>
canvas {
border: 2px solid #333;
margin: 10px;
}
img {
max-width: 200px;
margin: 10px;
}
</style>
</head>
<body>
<h3>Original Image:</h3>
<img id="originalImg" src="https://picsum.photos/400/300" alt="Original Image">
<h3>Cropped Image:</h3>
<canvas id="croppedCanvas" width="200" height="150"></canvas>
<script>
const img = new Image();
img.crossOrigin = "anonymous";
img.src = 'https://picsum.photos/400/300';
img.onload = function() {
const canvas = document.getElementById('croppedCanvas');
const ctx = canvas.getContext('2d');
// Crop from center: source (100, 75) with 200x150 size
// Draw to canvas (0, 0) with 200x150 size
ctx.drawImage(img, 100, 75, 200, 150, 0, 0, 200, 150);
};
</script>
</body>
</html>
The original image appears above a canvas showing the center portion of the image cropped to 200x150 pixels.
Approach 2: Using the getImageData() Method
The getImageData() method extracts pixel data from a specific rectangular area of the canvas. This approach is useful when you need to perform advanced image manipulations or pixel-level operations on the cropped area.
Example
Following is an example to crop an image using the getImageData() method
<!DOCTYPE html>
<html>
<head>
<title>Image Cropping with getImageData()</title>
<style>
canvas {
border: 2px solid #333;
margin: 10px;
}
.container {
display: flex;
align-items: center;
gap: 20px;
}
</style>
</head>
<body>
<div class="container">
<div>
<h3>Original Canvas:</h3>
<canvas id="originalCanvas" width="300" height="200"></canvas>
</div>
<div>
<h3>Cropped Result:</h3>
<canvas id="croppedCanvas" width="150" height="100"></canvas>
</div>
</div>
<script>
const img = new Image();
img.crossOrigin = "anonymous";
img.src = 'https://picsum.photos/300/200';
img.onload = function() {
const originalCanvas = document.getElementById('originalCanvas');
const ctx = originalCanvas.getContext('2d');
// Draw the full image on original canvas
ctx.drawImage(img, 0, 0, 300, 200);
// Get image data from a specific area (75, 50, 150x100)
const imageData = ctx.getImageData(75, 50, 150, 100);
// Create a new canvas for the cropped image
const croppedCanvas = document.getElementById('croppedCanvas');
const croppedCtx = croppedCanvas.getContext('2d');
// Put the extracted image data on the new canvas
croppedCtx.putImageData(imageData, 0, 0);
};
</script>
</body>
</html>
Two canvases appear side by side - the left shows the original image, and the right shows a cropped portion extracted from the center using getImageData().
Conclusion
Both approaches offer different advantages for image cropping. The drawImage() method is simpler and more efficient for basic cropping, while getImageData() provides pixel-level access for advanced image processing tasks. Choose the method that best fits your specific requirements.
3K+ Views
