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 相关文章推荐
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
javascript 数组操作详解
Jan 29 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
JavaScript实现简单图片切换
Apr 29 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采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
中职应届生会计求职信
2013/10/23 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
高级编程求职信模板
2014/02/16 职场文书
作文评语大全
2014/04/23 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
班长竞选演讲稿
2014/04/24 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
详解MySQL主从复制及读写分离
2021/05/07 MySQL