rc-cropper

An react component wrapping the Cropperjs.

Cropperjs Docs

• Image Cropper

Installation

Install via npm

npm install --save rc-cropper

Example

Inspired by react-cropper

import React, {Component} from 'react'
import Cropper from 'rc-cropper'
class Demo extends Component {
  crop(){
    const canvas = this.refs.cropper.getCroppedCanvas()
    const url = canvas.toDataURL() // image url
    const blob = canvas.toBlob(blob => {
      // upload the blob or do anything else
    })
  }
 
  render() {
    const options = {
      aspectRatio: 16 / 9
    }
    return (
      <Cropper
        ref='cropper'
        src='http://fengyuanchen.github.io/cropper/images/picture.jpg'
        options={options} />
    )
  }
}

Props

name	type	default	description
src	string		image src
className	string		custom class name
locale	object		for i18n
zoomStep	number	0.2	zoom step
moveStep	number	2px	move step
rotateStep	number	45deg	rotate step
onReady	function		callback when the cropper is ready
showActions	bool	false	whether show action buttons, support zoom/move/rotate
outputImgSize	object		specify the output canvas size, format: {width: *, height: *}
containerSizeLimit	object	{ maxWidth: 500, maxHeight: 500, minWidth: 50, minHeight: 50}	the size limitation of image container
cropBoxEditable	bool	true	Whether the cropbox width and height can edit by input. If outputImgSize is set, this property would be invaild
options	object		options for cropperjs

Note:

• If outputImgSize is specified and no aspectRatio specified in options, rc-cropper will caculate the aspectRatio based on outputImgSize automatically. aspectRation = outputImgSize.width / outputImgSize.height