react-image-compressor

    1.0.1 • Public • Published

    React Image Compressor

    React Component To Compress Image Files. It's based on cpol-image and others references

    DEMO

    Install

    You can import react-image-compressor.js to your react component file like this and process it with your preprocessor.

    You can install it via NPM

    npm install react-image-compressor

    Usage

     
    import React from 'react';
    import ReactDOM from 'react-dom';
     
    import ImageCompressor from 'react-image-compressor';
     
    class App extends React.Component {
     
      constructor() {
        super()
      }
     
      // Callback When Image Has Been Compressed~
      _getFiles(obj){
        console.log(obj);
      }
     
      render() {
        return (
          <ImageCompressor
            scale={ 100 }
            quality={ 75 }
            onDone={ this._getFiles.bind(this) } />
        )
      }
     
    }
     
     
    ReactDOM.render(<App />, document.getElementById("app"))
     

    Props

    onDone (Function)

    Callback after Compress the image. It will pass original file and compressed file and also the canvas element. The object pretty complete with blob & base64 and other needed information.

    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.

    Credits

    Thank You for Making this useful~

    Let's talk about some projects with me

    Just Contact Me At:

    License

    MIT Copyright (c) 2016 - forever Naufal Rabbani

    Install

    npm i react-image-compressor

    DownloadsWeekly Downloads

    50

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • bosnaufal