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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
js实现简易聊天对话框
2017/08/17 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
出纳岗位职责模板
2013/11/27 职场文书
个人近期表现材料
2014/02/11 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
新闻报道策划方案
2014/06/11 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书