Hc React Cropper

Installation

npm

1$ npm i hc-react-cropper

🚀 How to use

1import React from 'react';
2import { render} from 'react-dom';
3import Cropper from '../../src';
4import './style.css';
5
6const config = {
7  ratioXY: 1, // 裁剪 宽高比
8  size: 2, // 限制大小 2m
9}
10class App extends React.Component {
11  constructor(props) {
12    super(props);
13    this.onRef = this.onRef.bind(this);
14    this.state = {
15       src: ''
16    }
17  }
18  onRef (ref) {
19    this.child = ref;
20  }
21  getResult() {
22    this.child.cropperImg()
23    .then((res) => {
24      if (!res) {return false;}
25      this.setState({src: res.prefix + res.data});
26    });
27  }
28  cancel() {
29    this.child.cancel();
30  }
31  render() {
32    return (
33      <div style={{marginTop: '20px'}}>
34        <Cropper
35          onRef={this.onRef}
36          {...config}
37        >
38          <div className="btn-wrapper">
39            <button className="btn btn-cancel" onClick={() => this.cancel()}>取消</button>
40            <button className="btn btn-cropper" onClick={() => this.getResult()}>裁剪</button>
41          </div>
42        </Cropper>
43        <img src={this.state.src} width="200"></img>
44      </div>
45      
46    ); 
47  }
48}
49render(<App />, document.getElementById("root"));
50

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!