Image Comprression in ReactJs

In this we will learn how to compress an image offline using ReacJs

you can watch speedcode at youtube

for this we need to download a npm package browser-image-compression

npm install browser-image-compression --save or yarn add browser-image-compression

and import into your code
import imageCompression from 'browser-image-compression';

use to take input file image and then handle it using handleUpload.

<input type="file" onChange={handleUpload}/>

we need a state hook to save uplaoded file.

const [originalImage,setOriginalImage]=useState(null);

and also see preview we also need

const [uploadPreview,setUploadPreview]=useState("http://navparivartan.in/wp-content/uploads/2018/11/placeholder.png")

the url is dummyUrl to dispaly when image is not uploaded.

And to see whether is uploaded or not

const [uploaded,setUploaded]=useState(0);

Now handleUpload

 const handleUpload=(e)=>{
        setOriginalImage(e.target.files[0])
setUploadPreview(URL.createObjectURL(e.target.files[0]))
        setUploaded(1);
    }

use a button to compress and handle it

<button onClick={handleCompress}>Compress</button>

use compImage to store the path of compressed image.
[compImage,setCompImage]=useState("http://navparivartan.in/wp-content/uploads/2018/11/placeholder.png");

const handleCompress=e=>{
        if(uploaded)
        {
            const options = { 
            maxSizeMB: 2,          
            maxWidthOrHeight: 500,  

            useWebWorker: true, }

            imageCompression(originalImage,options).then(x=>{
                let output=x;
                const dlink=URL.createObjectURL(output);
                setCompImage(dlink);
                console.log(x)
            })
        }
        }

so the final code is

import React,{useState} from 'react'
import './App.css'
import imageCompression from 'browser-image-compression';
export default function App() {
    const [uploadPreview,setUploadPreview]=useState("http://navparivartan.in/wp-content/uploads/2018/11/placeholder.png")
    const [uploaded,setUploaded]=useState(0);
    const [originalImage,setOriginalImage]=useState(null);
    const [compImage,setCompImage]=useState("http://navparivartan.in/wp-content/uploads/2018/11/placeholder.png");
    const handleUpload=(e)=>{
        setOriginalImage(e.target.files[0])

        setUploadPreview(URL.createObjectURL(e.target.files[0]))
        setUploaded(1);
    }
    const handleCompress=e=>{
        if(uploaded)
        {
            const options = { 
            maxSizeMB: 2,          
            maxWidthOrHeight: 500,  

            useWebWorker: true, }

            imageCompression(originalImage,options).then(x=>{
                let output=x;
                const dlink=URL.createObjectURL(output);
                setCompImage(dlink);
                console.log(x)
            })
        }
        }
    return (
        <div>
            <h1>Image Compressor</h1>
            <div className="imgContainer">
            <img src={uploadPreview} alt="Uplaod Preview"/>
            <input type="file" onChange={handleUpload}/>
            </div>
            <button  onClick={handleCompress}>Compress</button>
            <div className="imgContainer">
            <img src={compImage} alt="Compress Preview"/>
            <button ><a href={compImage} download="download">Download</a></button>
            </div>
        </div>
    )
}

reference

Blog

Image Comprression in ReactJs

vasanthkumar

Join Our Newsletter. No Spam, Only the good stuff.

Related