react-image-file-cropper

It provides you a button to upload the file with image preview and cropper according to the need

Cropperjs as React components

Demo

Docs

• Image Cropper

Installation

Install via npm

npm install --save react-image-file-cropper

You need cropper.css in your project or you can use directly styles from this file .

Changelog

Todo

• Unit test

Quick Example

import React, {Component} from 'react';
import ImageCropper from 'react-image-file-cropper';
import 'react-image-file-cropper/cropper.css'; 

class Demo extends Component {
  onCrop(blob) {
    console.log("onCrop ", blob);
  }

  onChange(file) {
    console.log("onChange ", file);
  }

  render() {
    return (
        <ImageCropper 
            cropper={true} 
            preview={true} 
            onCrop={this.onCrop} 
            onChange={this.onChange}
            aspectRatio={1/ 1}
        />
    );
  }
}

Options

aspectRatio

https://github.com/fengyuanchen/cropperjs#aspectratio

cropper

If you provide the value true, cropper will appear, if you dont want a cropper, and only preview is needed you can use the preview option only.

preview

If you only want to preview the file uploaded you can user this option.

If you dont use a preview or cropper option a button will apper which will give you the selected file .

Methods

onCrop

It will provide the blob after cropping

onChange

It will provide the file after selecting

Build

npm run build
npm run build-example

Author

Adarsh ks([email protected])