ImageCompressor Package

Overview

ImageCompressor is a lightweight and efficient image compression utility that helps reduce the file size of images before uploading them to a server. It supports configurable options for maximum dimensions and quality, making it ideal for web and mobile applications.

Features

• Compresses images with custom width, height, and quality settings.
• Reduces file sizes without significant loss of quality.
• Easy to integrate with existing projects.
• Compatible with modern JavaScript frameworks like React.

Installation

Install the package using npm:

npm install image-compressor-soumojit-shome

Usage :

Before

Typically, users directly upload images to the server, leading to increased storage costs and bandwidth usage:

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 (
    <div>
      <h1>Image Uploader</h1>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload Image</button>
    </div>
  );
};

export default ImageUploader;

After

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.

Example Code (React.js)

Here’s a simple React example to demonstrate how to use the package:

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 (
    <div>
      <h1>Image Uploader</h1>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload Image</button>
    </div>
  );
};

export default ImageUploader;

API

ImageCompressorFunc(file, maxWidth, maxHeight, quality)

Parameters:

• file (File): The image file to compress.
• maxWidth (number): Maximum width of the compressed image.
• maxHeight (number): Maximum height of the compressed image.
• quality (number): Quality of the compressed image (0 to 1).

Returns:

• A Promise resolving to the compressed image file.

Benefits

• Storage Efficiency: Reduce storage costs by uploading smaller files.
• Faster Uploads: Smaller files mean quicker uploads, especially on slower networks.
• Better User Experience: Optimized images improve application performance.

Developer Details

If you want to learn more about the developer or see more projects, check out the links below:

• Blog : Blog
• About : About
• LinkedIn : LinkedIn