react-image-compressor

React Component for Converting File to base64

Usage no npm install needed!

<script type="module">
  import reactImageCompressor from 'https://cdn.skypack.dev/react-image-compressor';
</script>

README

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