React Component To Compress Image Files Via Client Side. https://bosnaufal.github.io/react-image-compressor
JavaScript CSS HTML
Latest commit ec28fd4 Dec 28, 2016 @BosNaufal First Commit
Permalink
Failed to load latest commit information.
build
src
.babelrc
.gitignore
LICENSE
README.md
index.html
package.json
webpack.config.js

README.md

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