只用纯数据跟我们的功能打交道

网络 2023-06-27 18:04

好程序员分享javascript实现自由编辑图片代码解读，当下我们项目中须要一个可自由编辑图片的功能，当图片可能出现须要频繁编辑，同时能满足发觉剪裁不满意想要微调的时侯，会发觉假如我们处理图片根据平时的习惯，如裁切后上传服务器或则转base64，都是不符合需求的。这么该如何处理比较好呢？如何以尽量少的网路恳求、少占用储存来解决应用场景呢？这么，便想到了只用纯数据来跟我们的功能打交道。

先安利个裁图利器cropperjs，个人觉得是个易上手，配置和api方式蛮齐全的一个组件库。

项目内引入，一定不要漏了引用式样

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

这儿我们以react为例

 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;
}

简单来说就是内层元素控制剪裁展示的宽高，同时按照项目需求的元素定位也挂在这，内部img挂载图片实际大小和偏斜。

cropperjs初始化后的元素，是会与初始化对象img处在同一dom层级，也就是说假如我们直接对展示img进行初始化的话，编辑区域展示将会受父元素，如图，放大图片时侯会不方查看超出部份

所以在这儿，为了图片编辑的自由度，建议分开展示dom与用以初始化cropper对象的dom，在这儿编辑区域为全屏幕为例，依据项目实际功能区域进行调整

js上传图片到项目服务器上_js上传图片进度条_js图片上传插件

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



//cropper初始化
 this.myRef = React.createRef();
 this.myCropper = new Cropper(this.myRef.current, options);
//options配置
const options = {
dragMode: 'move', //使裁剪时图片可拖动
background: false, //因为我们现在是全屏可编辑，需要隐藏掉默认的背景
}
//当然还有许多常见的配置项，如编辑框尺寸比例等，大家可自行查看api
//裁剪保存
save() {
const cropBoxData = this.myCropper.getCropBoxData(); //获取裁剪框数据
const canvasData = this.myCropper.getCanvasData(); //获取图片数据
 this.setState({
width: cropBoxData.width,
height: cropBoxData.height,
imgLeft: canvasData.left - cropBoxData.left,
imgTop: canvasData.top - cropBoxData.top,
imgWidth: canvasData.width,
imgHeight: canvasData.height
})
}

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

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

js上传图片进度条_js上传图片到项目服务器上_js图片上传插件

这么后续的需求接着来了，我们如何做到二次编辑的时侯，能还原疗效呢，嗯，虽然在上面我们记录裁图数据的时侯，把相应的数据关系再估算一遍就好了,在初始化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=newCropper(this.myRef.current,options);

js图片上传插件_js上传图片到项目服务器上_js上传图片进度条