How to Crop an Image in JavaScript? Last Updated : 08 Nov, 2024 Comments Improve Suggest changes Like Article Like Report To crop an image in JavaScript, you can use the <canvas> element to manipulate the image's dimensions and crop it to a specified area. This approach is flexible and works entirely in the browser without needing external libraries. Here's a step-by-step example demonstrating how to crop an image using JavaScript:Example for Cropping an Image with Canvas HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Crop Image with JavaScript</title> </head> <body> <input type="file" id="fileInput" accept="image/*"> <canvas id="canvas" style="border: 1px solid black;"></canvas> <script> const fileInput = document.getElementById('fileInput'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); fileInput.addEventListener('change', function() { const file = fileInput.files[0]; const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { // Set canvas dimensions to desired crop size const cropWidth = 100; // Desired width of cropped image const cropHeight = 100; // Desired height of cropped image canvas.width = cropWidth; canvas.height = cropHeight; // Calculate crop position (example: top-left corner) const cropX = 50; // Starting x-coordinate const cropY = 50; // Starting y-coordinate // Draw the cropped portion of the image on the canvas ctx.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight); }; img.src = event.target.result; }; if (file) { reader.readAsDataURL(file); } }); </script> </body> </html> Output:Choose ImageOriginal ImageCropped ImageExplanation:File Input: The <input type="file"> element allows users to select an image from their device.Reading the Image: A FileReader object reads the selected image file and converts it to a data URL, which can be used as the src of an Image object.Loading the Image: Once the image is loaded, the canvas dimensions are set to the desired crop size.Cropping: The drawImage() method of the canvas context (ctx) is used to crop and draw the specified portion of the image. It takes several parameters:img: The image to draw.cropX and cropY: The starting coordinates of the crop area within the source image.cropWidth and cropHeight: The dimensions of the crop area.0, 0, cropWidth, cropHeight: The coordinates and dimensions to draw the cropped portion on the canvas.Key Points:drawImage() Method: This method is key to cropping. The first four parameters specify the source image and crop area, while the last four parameters specify the destination coordinates and size on the canvas.Canvas Resizing: Setting the canvas dimensions controls the size of the cropped output.Flexible Cropping: You can adjust cropX, cropY, cropWidth, and cropHeight to crop different areas of the image.This approach provides a simple way to crop images in the browser using only JavaScript and <canvas>. It's efficient for image manipulation tasks and does not require any server-side processing Comment More infoAdvertise with us Next Article How to Crop an Image in JavaScript? A anuragtriarna Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to create an image map in JavaScript ? An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded 3 min read How to Display Images in JavaScript ? To display images in JavaScript, we have different approaches. In this article, we are going to learn how to display images in JavaScript. Below are the approaches to display images in JavaScript: Table of Content Using CreateElementUsing InnerHTMLApproach 1: Using CreateElementIn an HTML document, 2 min read How to crop images in ReactJS ? Image cropping is a common requirement in web applications, especially when dealing with user-generated content, photo editing, or image manipulation. ReactJS, being a popular JavaScript library for building user interfaces, provides various techniques and libraries that can be used to implement ima 3 min read How to use document.images in JavaScript ? In JavaScript, the document.images property returns a collection of all "<img>" elements within the current document. We can manipulate these images using various properties and methods. We will see how to work with document.images in JavaScript. ApproachFirst, create a basic HTML structure an 2 min read How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit 2 min read How to pass image as a parameter in JavaScript function ? We all are familiar with functions and their parameters and we often use strings, integers, objects, and arrays as a parameter in JavaScript functions but now will see how to pass an image as a parameter in the JavaScript functions. We will use vanilla JavaScript here. Approach: First, create a func 2 min read How to Crop Image in CSS? Cropping images using CSS is an effective way to display only a portion of the image without altering the image file itself. Cropping can allow the designers to focus on the specific parts of the image while maintaining control over how the image fits within the layout. 1. Using overflow PropertyThi 2 min read How to zoom-in and zoom-out image using JavaScript ? Zooming in and out of images using JavaScript refers to the ability to increase (zoom in) or decrease (zoom out) the size of an image interactively. This effect enhances user experience by allowing users to focus on specific image details or view the full image easily.These are the following ways:Ta 3 min read How to convert image into base64 string using JavaScript ? In this article, we will convert an image into a base64 string using Javascript. The below approaches show the methods to convert an image into a base64 string using Javascript.ApproachHere we will create a gfg.js file which will include JavaScript code and one gfg.html file.Now we will put onchange 2 min read How to Zoom an Image on Scroll using JavaScript? Zoom in and out of images is a common feature in web development. One way to achieve this effect is by using JavaScript to zoom in and out of an image when the user scrolls. In this article, we will go through the steps needed to create a zoomable image using JavaScript.Step 1: HTML Markup: The firs 3 min read Like