compressor-img

Javascript library for image compressor in client side

• Demo
• Integration in React
• Integration in Angular

Table of contents

• Getting started
• Example with React
• Browser support
• License

Getting started

Install

npm install compressor-img --save

or

yarn add compressor-img

Usage

Syntax

const params = {
  onSuccess: response => {},
  scale: 70,
  quality: 70,
  originalImage: "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..."
};
new ImageCompressor(params);

params

scale (Number) : The percentage of image scaling it starts from 1 to 100.

quality (Number) : The percentage of image quality it starts from 1 to 100.

originalImage (base64) : Image in base64 , example : "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...".

holdCompress (bool)(default value false) : set this variable a true , if you dont want to start compress the image when the class ImageCompressor is instantiated example .

onSuccess (Function) : Callback after Compress the image. It will pass original file (base64) and compressed file (base64).

Example using holdcompress params

const params = {
  onSuccess: response => {},
  scale: 70,
  quality: 70,
  originalImage: "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...",
  holdCompress: true
};
const instanceImageCompressor = new ImageCompressor(params);
instanceImageCompressor.startCompress();

Example with React

import React, { Component } from "react";
import { ImageCompressor, getImageSize } from "compressor-img";

class UploadFile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      originalImage: null,
      sizeOriganleImage: null,
      compressedImage: null,
      sizeCompressedImage: null
    };
  }

  handleImageChange = event => {
    event.preventDefault();

    if (event.target.files.length !== 0) {
      let reader = new FileReader();
      let file = event.target.files[0];

      reader.onloadend = () => {
        let imageCompressor = new ImageCompressor({
          onSuccess: response => {
            this.setState({
              originalImage: response.original,
              sizeOriganleImage: getImageSize(response.original),
              compressedImage: response.compressed,
              sizeCompressedImage: getImageSize(response.compressed)
            });
          },
          scale: 70,
          quality: 70,
          originalImage: reader.result
        });
      };

      reader.readAsDataURL(file);
    }
  };

  render() {
    return (
      <div className="upload-file-container">
        <input id="file" type="file" onChange={this.handleImageChange} />
        <div className="display-compressed-image">
          {this.state.sizeOriganleImage &&
            this.state.sizeOriganleImage +
              " kb  -> " +
              this.state.sizeCompressedImage +
              " kb"}
          {this.state.compressedImage && (
            <img
              style={{
                maxWidth: "600px",
                maxheight: "400px"
              }}
              src={this.state.compressedImage}
            />
          )}
        </div>
      </div>
    );
  }
}
export default UploadFile;

⬆ back to top

Browser support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)

License

MIT © youssef maghzaz

⬆ back to top