Nascent Political Miscreant

    compressor-img

    1.0.7 • Public • Published

    compressor-img

    Version

    Javascript library for image compressor in client side

    Table of contents

    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

    Install

    npm i compressor-img

    DownloadsWeekly Downloads

    123

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    8.08 kB

    Total Files

    4

    Last publish

    Collaborators

    • ysfmag