import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

this.state = {
width: 640, //圖片展示寬
height: 360, //圖片展示高 
imgWidth: 640, //圖片實(shí)際寬
imgHeight: 360, //圖片實(shí)際高
imgLeft: 0, //圖片左偏移
imgTop: 0, //圖片上偏移
editing: false //是否編輯中
}
//展示圖片的基本dom結(jié)構(gòu)，我們使用外div內(nèi)img的形式，來跟數(shù)據(jù)結(jié)合控制裁剪圖片的展示
const { width, height, imgWidth, imgHeight, imgLeft, imgTop, editing } = this.state;
const containerStyle = {
width: `${width}px`,
height: `${height}px`
}
const imgStyle = {
width: `${imgWidth}px`,
height: `${imgHeight}px`,
left: `${imgLeft}px`,
top: `${imgTop}px`
}
.img-container {
overflow: hidden;
position: relative;
}
.crop-img {
position: absolute;
left: 0;
top: 0;
}
<div 
className="img-container" 
style={containerStyle}
>
<img 
className="crop-img"
src={picture} 
style={imgStyle} 
alt="pic"
></img>
</div>

.edit-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div 
className="img-container" 
style={containerStyle}
>
<img 
className="crop-img"
src={picture} 
style={imgStyle} 
alt="pic"
></img>
</div>
//cropper初始化
this.myRef = React.createRef();
this.myCropper = new Cropper(this.myRef.current, options);
//options配置
const options = {
dragMode: 'move', //使裁剪時(shí)圖片可拖動(dòng)
background: false, //因?yàn)槲覀儸F(xiàn)在是全屏可編輯，需要隱藏掉默認(rèn)的背景
}
//當(dāng)然還有許多常見的配置項(xiàng)，如編輯框尺寸比例等，大家可自行查看api
//裁剪保存
save() {
const cropBoxData = this.myCropper.getCropBoxData(); //獲取裁剪框數(shù)據(jù)
const canvasData = this.myCropper.getCanvasData(); //獲取圖片數(shù)據(jù)
this.setState({
width: cropBoxData.width,
height: cropBoxData.height,
imgLeft: canvasData.left - cropBoxData.left,
imgTop: canvasData.top - cropBoxData.top,
imgWidth: canvasData.width,
imgHeight: canvasData.height
})
}

const options = {
dragMode: 'move',
background: false,
//控件初始化后重置相應(yīng)配置
ready: () => {
const { width, height, imgWidth, imgHeight, imgLeft, imgTop } = this.state;
//根據(jù)實(shí)際需要出現(xiàn)裁圖功能進(jìn)行定位，此處left和top僅為測試暫時(shí)默認(rèn)值定義
const left = 50; 
const top = 50;
this.myCropper.setCanvasData({
width: imgWidth,
height: imgHeight,
left: left,
top: top
});
this.myCropper.setCropBoxData({
left: left - imgLeft,
top: top - imgTop,
width: width,
height: height
})
}
}
this.myCropper = new Cropper(this.myRef.current, options);