狗万官网酒店 > 狗万官网下载 > javascript落实自由编辑图片代码详解_javascript艺术

javascript落实自由编辑图片代码详解_javascript艺术

来源: 2019-08-04 19:43 我来投稿 参与评论
这篇文章主要介绍了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;
}
<div 
className="img-container" 
style={containerStyle}
>
<img 
className="crop-img"
src={picture} 
style={imgStyle} 
alt="pic"
></img>
</div>

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

cropperjs初始化后的因素,是会与初始化对象img处在同一dom村级,具体说来如果我们直接对展示img开展初始化的话,编排区域展示将会受父元素,如图,推广图片时候会不方查看超出部分

故而在此地,为了图片编辑的广度,提议分开展示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
})
}

这样的话 咱就足以完全在自定义的全屏内编辑,保留效果如下,到此处我们就形成了序部分功能,裁剪并保留数据和展示

第一介绍下我们用到的两个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的固定,才有了上述的算计形式。

这会儿,基础能到此结束,如果说是采取在h5编排中,规划到scale缩放的话,相关的数目计算都要算上scale的缩放值哦,不然就会出现展示图片和编排图片大小不对等的面貌。同时还有广大功能就不做展示了,安装裁剪框比例,编排缩放等,迎接尝试。

当然了,如果想要保留图片,也有相应的主意到处裁剪图片的数目

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

说到底,咱可以见到,在全路功能过程中,咱需要的只是裁剪的数目,读写快,也不需要开展额外的图形存储,调减文件服务器存储的开发与优化。

cropperjs github

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

上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?



   
    &lt;b id="96ace50f"&gt;&lt;/b&gt;