ImageCompressor is a lightweight and efficient image compression utility that helps reduce the file size of images before uploading them to a server
npm install image-compressor-soumojit-shomebash
npm install image-compressor-soumojit-shome
`
Usage :
$3
Typically, users directly upload images to the server, leading to increased storage costs and bandwidth usage:
`jsx
import React, { useState } from 'react';
// Assuming the user has their own uploadFileToServer function
import { uploadFileToServer } from './yourUploadFunction'; // replace with actual import
import { ImageCompressorFunc } from 'image-compressor-soumojit-shome';
const ImageUploader = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (e) => {
setSelectedFile(e.target.files[0]);
};
const handleUpload = async () => {
if (!selectedFile) {
alert('Please select an image first.');
return;
}
try {
// directly upload images to the server
await uploadFiletoServer(selectedFile);
alert('Image uploaded successfully!');
} catch (error) {
console.error('Error uploading image:', error);
alert('Failed to upload the image.');
}
};
return (
Image Uploader
);
};
export default ImageUploader;
`
$3
With ImageCompressor, compress the image first to reduce its size before uploading:
1. Pass the image to the compressor function.
2. Upload the compressed image to the server.
$3
Here’s a simple React example to demonstrate how to use the package:
`jsx
import React, { useState } from 'react';
// Assuming the user has their own uploadFileToServer function
import { uploadFileToServer } from './yourUploadFunction'; // replace with actual import
import { ImageCompressorFunc } from 'image-compressor-soumojit-shome';
const ImageUploader = () => {
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (e) => {
setSelectedFile(e.target.files[0]);
};
const handleUpload = async () => {
if (!selectedFile) {
alert('Please select an image first.');
return;
}
try {
// Define compression options
const imageCompressionOptions = {
maxWidth: 1920,
maxHeight: 1920,
quality: 0.2,
};
// Compress the image
const compressedFile = await ImageCompressorFunc(
selectedFile,
imageCompressionOptions.maxWidth,
imageCompressionOptions.maxHeight,
imageCompressionOptions.quality
);
// Upload the compressed image to the server
await uploadFiletoServer(compressedFile);
alert('Image uploaded successfully!');
} catch (error) {
console.error('Error uploading image:', error);
alert('Failed to upload the image.');
}
};
return (
Image Uploader
);
};
export default ImageUploader;
`
API
`jsx
ImageCompressorFunc(file, maxWidth, maxHeight, quality)
``