react-cropper（图片剪裁）

github：https://github.com/react-cropper/react-cropper
doc：https://react-cropper.github.io/react-cropper/

效果

Quick Example

import React, {Component} from 'react';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css'; // see installation section above for versions of NPM older than 3.0.0
// If you choose not to use import, you need to assign Cropper to default
// var Cropper = require('react-cropper').default
class Demo extends Component {
  _crop = () => {
    // image in dataUrl
    console.log(this.cropper.getCroppedCanvas().toDataURL(), 'base64格式');
    // image in blob
    const cvs = this.cropper.getCroppedCanvas({
      width: 540,
    });
    cvs.toBlob(blob => {
      console.log(blob, 'blob文件');
    });
    // 旋转照片
    this.cropper.rotate(-45);
  }
  onCropperInit = (cropper) => {
    this.cropper = cropper;
  }
  render() {
    return (
      <Cropper
        src="http://fengyuanchen.github.io/cropper/images/picture.jpg"
        style=
        // Cropper.js options
        initialAspectRatio={16 / 9}
        guides={false}
        crop={this._crop}
        onInitialized={this.onCropperInit}
        />
    );
  }
}