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

this.state = {
width: 640, //图片展示宽
height: 360, //图片展示高 
imgWidth: 640, //图片实际宽
imgHeight: 360, //图片实际高
imgLeft: 0, //图片左偏移
imgTop: 0, //图片上偏移
editing: false //是否编辑中
}
//展示图片的基本dom结构，我们使用外div内img的形式，来跟数据结合控制裁剪图片的展示
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;
}

.edit-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

这样的话 我们就可以完全在自定义的全屏内编辑，保存效果如下，到这里我们就完成了第一部分功能，裁剪并保存数据和展示

重点介绍下我们用到的两个api方法getCropBoxData和getCanvasData，getCanvasData是用来获取图片的实际数据的(当前的宽高，和相对于父元素可视区域的位移偏移量)，getCropBoxData则是获取相对于图片区域的裁剪区相关数据。

那么后续的需求接着来了，我们怎么做到二次编辑的时候，能还原效果呢，嗯，其实在前面我们记录裁图数据的时候，把相应的数据关系再计算一遍就好了,在初始化cropper的options中增加配置

const options = {
dragMode: 'move',
background: false,
//控件初始化后重置相应配置
ready: () => {
const { width, height, imgWidth, imgHeight, imgLeft, imgTop } = this.state;
//根据实际需要出现裁图功能进行定位，此处left和top仅为测试暂时默认值定义
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);

这时候我们再点击裁图，就完美还原了，左边和上边的间隙就是setCanvasData的top和left，根据实际项目进行调整，setCropBoxData的left和top是相对于cropper-canvas的定位，才有了以上的计算形式。

此时，基本功能到此结束，如果说是应用在h6编辑中，设计到scale缩放的话，相关的数据计算都要算上scale的缩放值哦，不然就会出现展示图片和编辑图片大小不对等的状况。同时还有许多功能就不做展示了，设置裁剪框比例，编辑缩放等，欢迎尝试。

当然了，如果想要保存图片，也有相应的方法到处裁剪图片的数据

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg')

关于“javascript怎么实现自由编辑图片功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。