How to Resize, Crop, Compress Images Before Uploading In ReactJS?

Hi Dev,

This tutorial is focused on how to resize, crop, and compress images before uploading in ReactJS. you'll learn how to resize, crop, and compress images before uploading using ReactJS. We will use how to use ReactJS to resize, crop, and compress images before uploading them to your server. if you have a question about React resizing, crop & compress images before uploading then I will give a simple example with a solution.

In this tutorial, you will learn how to use ReactJS to resize, crop, and compress images before uploading them to your server. This is helpful if you need to save storage space by reducing the image size, or if you want to enhance the user experience by reducing upload time.

To achieve this, we'll be using the ReactJS library, along with the popular image processing library CropperJS. Additionally, we will utilize the HTML5 canvas element to resize the image.

Step 1: Create React App

In this step, open your terminal and execute the following command to create a new React app

npx create-react-app my-react-app

To run the React app, navigate to the root directory of your project in the terminal and execute the following command to start the development server

npm start

Step 2: Install React Image Crop Package

To install React Image Crop dependencies into your React app, open your terminal and navigate to the root directory of your project. Then, execute the following command

npm install cropperjs canvas --save

CropperJS is a powerful JavaScript library that allows you to crop and manipulate images using a canvas element. With CropperJS, you can easily select a specific area of an image and extract it as a new image with a customized size and format. The library provides several canvas-related methods that you can use to work with the cropped image and customize its output. Some of the main canvas-related methods provided by CropperJS include:

• getCroppedCanvas(): This method returns a canvas element that contains the cropped portion of the original image. You can specify options such as the output size, format, and quality of the cropped canvas.
• setCanvasData(data): This method sets the data for the canvas element. The data parameter should be an object that contains the following properties: left, top, width, height, naturalWidth, and naturalHeight.
• setCropBoxData(data): This method sets the data for the crop box. The data parameter should be an object that contains the following properties: left, top, width, and height.
• clear(): This method clears the canvas element.
• replace(url): This method replaces the current image with a new image specified by the URL parameter. The canvas element is updated with the new image.
• disable(): This method disables the cropping functionality of the CropperJS instance.
• enable(): This method enables the cropping functionality of the CropperJS instance.

These methods provide a flexible and powerful way to manipulate images and create customized outputs with CropperJS.

Step 3: Create the Image Upload Component

Next, let's create a new component that will allow users to upload an image to your app. To do this, navigate to your project's src directory and create a new file called ImageUpload.js.

import React, { useState } from 'react';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
 
const ImageUpload = () => {
    const [image, setImage] = useState(null);
    const [cropper, setCropper] = useState(null);
 
    const handleFileInputChange = (e) => {
        e.preventDefault();
        const fileReader = new FileReader();
        fileReader.onload = () => {
            setImage(fileReader.result);
        };
        fileReader.readAsDataURL(e.target.files[0]);
    };
 
    const handleCrop = () => {
        const canvas = cropper.getCroppedCanvas();
        canvas.toBlob((blob) => {
            console.log(blob);
        });
    };
 
    return (
        <div>
            <input type="file" onChange={handleFileInputChange} />
            {image && (
                <Cropper
                    src={image}
                    initialAspectRatio={1}
                    guides={false}
                    viewMode={1}
                    minCropBoxWidth={200}
                    minCropBoxHeight={200}
                    background={false}
                    responsive={true}
                    autoCropArea={1}
                    checkOrientation={false}
                    onInitialized={(instance) => {
                        setCropper(instance);
                    }}
                />
            )}
            <button onClick={handleCrop}>Crop</button>
        </div>
    );
};
 
export default ImageUpload;

Step 4: Test the Image Upload Component

Now that we've created the ImageUpload component, let's add it to our App.js file to test it out. To do this, navigate to your project's src directory and open the App.js file. Once you've opened the file, replace the existing code with the following

import React from 'react';
import ImageUpload from './ImageUpload';
 
const App = () => {
    return (
        <div>
            <ImageUpload />
        </div>
    );
};
 
export default App;

Now that we've added the ImageUpload component to our App.js file, let's save the changes and start the development server to test it out. To save the changes, simply exit the App.js file and save the changes if prompted.

Next, navigate to your project's root directory in your terminal and run the following command to start the development server:

npm start

I hope it could help you...