rc-cropping@1.0.0

CropViewer component for react

// use jsx to render html, do not modify simple.html
import 'rc-cropping/assets/index.css';
import CropViewer from 'rc-cropping';
import Dialog from 'rc-dialog';
import 'rc-dialog/assets/index.css';
import Upload from 'rc-upload';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  beforeUpload(file) {
    const cropper = this.cropper;
    console.log('>> cropper', this.cropper);
    return cropper.selectImage(file).then(image => {
      console.log('>> selecTImage', image);
      return image;
    });
  }
  render() {
    return (<div>
      <Upload type="drag" beforeUpload={this.beforeUpload} ><a>开始上传</a></Upload>
      <CropViewer
        getSpinContent={() => <span>loading...</span> }
        renderModal={() => <Dialog />}
        locale="zh-CN"
        ref={ele => this.cropper = ele}
        circle
      />
    </div>);
  }
}

ReactDOM.render(<App />, document.getElementById('__react-content'));
Fork me on GitHub