How to crop images in ReactJS ?
Last Updated :
29 Jul, 2024
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 image cropping functionality. In this article, we'll explore react-image-crop package to achieve so.
The react-image-crop is a tool for cropping images for React with no dependencies. This tool will help us in cropping images, It takes an image as a source, and after selecting the target area it will provide us with the cropped dimensions.
Approach: In order to crop the image, we have used the react-image-crop module, which is very popular for cropping images. We have imported that module and used the ReactCrop component from this package. In our main App.js file, we have used this component and passed it as a child to our input element which chooses files.
Creating React Application And Installing Module:
Step 1: Create a React app using the following command:
npx create-react-app demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Project structure: Our project structure will look like this.

Step 3: After creating the ReactJS application, Install the react-image-crop package using the following command:
npm install react-image-crop
Implementation: Write down the following code in respective files.
App.js
JavaScript
import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
function App() {
const [src, setSrc] = useState(null);
const [crop, setCrop] = useState({ aspect: 16 / 9 });
const [image, setImage] = useState(null);
const [output, setOutput] = useState(null);
const selectImage = (file) => {
setSrc(URL.createObjectURL(file));
};
const cropImageNow = () => {
const canvas = document.createElement('canvas');
const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height;
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
const pixelRatio = window.devicePixelRatio;
canvas.width = crop.width * pixelRatio;
canvas.height = crop.height * pixelRatio;
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(
image,
crop.x * scaleX,
crop.y * scaleY,
crop.width * scaleX,
crop.height * scaleY,
0,
0,
crop.width,
crop.height,
);
// Converting to base64
const base64Image = canvas.toDataURL('image/jpeg');
setOutput(base64Image);
};
return (
<div className="App">
<center>
<input
type="file"
accept="image/*"
onChange={(e) => {
selectImage(e.target.files[0]);
}}
/>
<br />
<br />
<div>
{src && (
<div>
<ReactCrop src={src} onImageLoaded={setImage}
crop={crop} onChange={setCrop} />
<br />
<button onClick={cropImageNow}>Crop</button>
<br />
<br />
</div>
)}
</div>
<div>{output && <img src={output} />}</div>
</center>
</div>
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://www.npmjs.com/package/react-image-crop
Similar Reads
How to Set Background Images in ReactJS
Setting the background images in React improves the UI and user experience of web apps by making the appearance better. These images can be some shape or shade using color gradients. In this tutorial, we will look at different methods to apply background images to your react application. How to Set
4 min read
How to create Image Slider in ReactJS ?
Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps.Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to s
4 min read
How to Crop an Image in JavaScript?
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 imag
3 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 Cache Images in React Native?
Caching images in React Native enhances app performance by reducing network load and improving image load times. By storing frequently accessed images locally, the app can quickly display them without needing to re-download, resulting in a smoother and faster user experience. Caching images in React
2 min read
How to set Background Image in react-native ?
In this article, we will see how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it. Setting background images requires using the ImageBackground component in React Native. You can style it further to adapt to different s
5 min read
How to use imgur to host images in ReactsJS ?
Imgur is primarily used as an image-sharing service, where users post content through an interface provided by the company, just like Facebook or Instagram. But we can also post images to Imgur by accessing their APIs. So, in this article, we will discuss how to upload images to Imgur in React witho
2 min read
How to add Image Carousel in Next.js ?
In this article, we are going to learn how we can add an Image Carousel in NextJS. NextJS is a React-based framework. It has the power to Develop beautiful Web applications for different platforms like Windows, Linux, and mac.ApproachTo create image carousel in next.js we are going to use a react-re
2 min read
How To Create A Custom Image Loader In NextJS?
Creating a custom image loader in Next.js allows you to control how images are loaded and optimized. This is useful for integrating with different image services or handling specific image processing needs. Hereâs how to create and use a custom image loader: This article will walk you through the st
4 min read
How to use List Component in ReactJS?
Lists are continuous, vertical indexes of text or images. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And In
2 min read