DEV Community 👩‍💻👨‍💻

Cover image for Image Comprression in ReactJs
vasanthkumar
vasanthkumar

Posted on

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);
    } 
Enter fullscreen mode Exit fullscreen mode

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)
            })
        }
        }

Enter fullscreen mode Exit fullscreen mode

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>
    )
}
Enter fullscreen mode Exit fullscreen mode

reference

Top comments (0)

Tired of sifting through your feed?

You can change your feed and see more relevant posts by adding a rating to different tags on DEV. Head here to adjust your weights.