I recently got interested in compressing images on the client-side for a couple of reasons:
- Reduce my cloudinary bandwidth and storage usage
- Users were complaining about long waits while uploading images
So I ventured to look for a library that will help me solve this fast and easy, maybe in the future I might build my own from scratch.
So I came by a couple of libraries that will help in compressing images on the client-side.
Browser Image Compression
- Install it with your favorite package manager
npm install browser-image-compression --save
or
yarn add browser-image-compression
- Create your react component
import React from "react";
class App extends React.Component {
onChange = async (e) => {
// Some onchange event calls
};
render() {
return (
<input name="file" id="file" onChange={this.onChange} type="files" />
);
}
}
- Start compressing
...
import Compress from "browser-image-compression";
...
onChange = (e) => {
// Get the files selected from the input tag
// On select files always come in an array even
// if you choose one its the first index
// if you selected a couple then loop through the array
const file = e.target.files[0]
// Compression config
const options = {
// As the key specify the maximum size
// Leave blank for infinity
maxSizeMB: 1.5,
// Use webworker for faster compression with
// the help of threads
useWebWorker: true
}
// Initialize compression
// First argument is the file object from the input
// Second argument is the options object with the
// config
Compress(file, options)
.then(compressedBlob => {
// Compressed file is of Blob type
// You can drop off here if you want to work with a Blob file
console.log(compressedBlob)
// If you want to work with the File
// Let's convert it here, by adding a couple of attributes
compressedBlob.lastModifiedDate = new Date()
// Conver the blob to file
const convertedBlobFile = new File([compressedBlob], file.name, { type: file.type, lastModified: Date.now()})
// Here you are free to call any method you are gonna use to upload your file example uploadToCloudinaryUsingPreset(convertedBlobFile)
})
.catch(e => {
// Show the user a toast message or notification that something went wrong while compressing file
})
}
Next
Next, we will cover using react-image-file-resizer
library
Top comments (0)