react +插件实现图片裁剪

1. npm i react-image-crop --save
2. import ReactCrop from 'react-image-crop'; import 'react-image-crop/dist/ReactCrop.css';

然后我们来看一个例子：

import ReactDOM from "react-dom";
import React, { PureComponent } from "react";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

import "./App.css";

class App extends PureComponent {
  state = {
    src: null,
    crop: {
      aspect: 1,
      width: 50,
      x: 0,
      y: 0
    }
  };

  onSelectFile = e => {
    if (e.target.files && e.target.files.length > 0) {
      const reader = new FileReader();
      reader.addEventListener("load", () =>
        this.setState({ src: reader.result })
      );
      console.log(reader.result);
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  onImageLoaded =