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>
)
}
Top comments (0)