好程序员分享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,在这里编辑区域为全屏幕为例,根据项目实际功能区域进行调整
.edit-container {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}