javascript实现自由编辑图片代码详解


Posted in Javascript onJune 21, 2019

当下我们项目中需要一个可自由编辑图片的功能,当图片可能出现需要频繁编辑,同时能满足发现裁剪不满意想要微调的时候,会发现如果我们处理图片按照平常的习惯,如裁剪后上传服务器或者转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;
}
<div 
className="img-container" 
style={containerStyle}
>
<img 
className="crop-img"
src={picture} 
style={imgStyle} 
alt="pic"
></img>
</div>

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

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

javascript实现自由编辑图片代码详解

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

.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', //使裁剪时图片可拖动
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
})
}

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

javascript实现自由编辑图片代码详解

javascript实现自由编辑图片代码详解

重点介绍下我们用到的两个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的定位,才有了以上的计算形式。

javascript实现自由编辑图片代码详解

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

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

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

最后,我们可以看到,在整个功能过程中,我们需要的只是裁剪的数据,读写快,也不需要进行额外的图片存储,减少文件服务器存储的开销与优化。

cropperjs github

感谢大家收看,欢迎讨论和指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 #Javascript
微信小程序实现圆形进度条动画
Nov 18 #Javascript
JavaScript迭代器的含义及用法
Jun 21 #Javascript
js事件触发操作实例分析
Jun 21 #Javascript
微信小程序实现下拉刷新动画
Jun 21 #Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 #Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 #Javascript
You might like
PHP学习笔记之二 php入门知识
2011/01/12 PHP
php学习之变量的使用
2011/05/29 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php中的ini配置原理详解
2014/10/14 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
使javascript也能包含文件
2006/10/26 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
浅谈python迭代器
2017/11/08 Python
详解flask表单提交的两种方式
2018/07/21 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python3 读取Word文件方式
2020/02/13 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
工艺工程师工作职责
2013/11/23 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
参观邀请函范文
2015/02/02 职场文书
师范生教育见习总结
2015/06/23 职场文书
汉语拼音教学反思
2016/02/22 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python