javascript自由编辑图片示例代码

  • 时间:
  • 1326人关注

这篇文章主要介绍了javascript实现自由编辑图片代码详解,在当下的的前端项目中,图片功能可以说是非常常见的,图片的展示、图片的裁剪编辑、图片的上传等,那么我们的项目便来了个需求,另外这篇文章主要知识点是关于javascript、编辑图片、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进行初始化的话,编辑区域展示将会受父元素,如图,放大图片时候会不方查看超出部分

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


上一篇:由ReactJS的Hello world说开来代码实例

下一篇:javascript完美实现给定日期返回上月日期代码详解

相关内容

  • Java和JavaScript是什么关系

    java和javascript外形字母非常像,但是二者是完全不同的二种语言。形象说,二者关系就和雷锋和雷峰塔关系一样。 js属于脚本语言,不需要编就能在浏览器解释执行;而java属于编程语言,需要编译之后才能运行。 通常js写到网页的jsp、html中,由浏览器解释,发挥其作用;而java经过编译成为class文件,运行在web服务器容器中,比如tomcat。 要说二者,看起来相同的地方,也就是编程语法上,看起来都一样。 1、java和JavaScript没有任何的血缘关系,java是是由

    12-18Java与JavaScript关系

    阅读更多
  • js与java有区别吗

    虽然JavaScript与Java有紧密的联系,但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言, 它的前身是Live Script;而Java的前身是Oak语言。 1、语言本质不同。 java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,即使

    11-16JavaScript 与 Java 有什么不同

    阅读更多
  • javascript模拟鼠标点击事件的实例代码

    这篇文章主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    06-15javascript触发模拟鼠标点击事件

    阅读更多
  • JavaScript格式化数字、金额、千分位、保留几位小数、舍入舍去的实例代码

    这篇文章主要介绍了JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随

    01-06JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去

    阅读更多
  • 实例解析JavaScript中BOM对象原理与用法

    这篇文章主要介绍了JavaScript中BOM对象原理与用法,,结合实例形式分析了javascript中BOM浏览器对象模型相关概念、原理、用法及相关操作注意事项,需要的朋友可以参考下

    02-04JavaScript中BOM对象原理与用法分析

    阅读更多
  • 大型JavaScript应用最佳实践指南

    大型JavaScript应用最佳实践指南

    大小:35 MBJavaScript

    点击下载
  • 看透JavaScript:原理、方法与实践

    看透JavaScript:原理、方法与实践

    本书由资深软件开发专家撰写,凝聚其多年开发经验,系统、深入、全面地阐释JavaScript,内容涉及流行的Web开发实践,结合实际案例进行讲解,授人以渔。本书内容并不局限于某个具体功能的

    大小:251 MBJavaScript

    点击下载
  • JavaScript编程全解

    JavaScript编程全解

    JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题,无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

    大小:6.67 MBjs编程

    点击下载
  • JavaScript函数式编程

    JavaScript函数式编程

    JavaScript 是近年来非常受瞩目的一门编程语言,它既支持面向对象编程,也支持函数式编程。本书专门介绍JavaScript函数式编程的特性。

    大小:42158 MB MJavaScript

    点击下载
  • 你不知道的JavaScript(中卷)

    你不知道的JavaScript(中卷)

    JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

    大小:7.8 MBJS

    点击下载
  • JavaScript高级程序设计

    JavaScript高级程序设计

    《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜,使很多特有保持和手机客户端拓展宣布进到标准,另外也为JavaScript增加了许多融入发展方

    大小:23 MBJS程序设计

    点击下载
  • 你不知道的JavaScript(上卷)

    你不知道的JavaScript(上卷)

    很多人对JavaScript这门语言的印象都是简单易学,很容易上手。虽然JavaScript语言本身有很多复杂的概念,但语言的使用者不必深入理解这些概念就可以编写出功能全面的应用。

    大小:8.4 MBJS

    点击下载
  • 完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

    完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程

    完美图解物联网技术系列》图书是当前物联网开发技术应用的集大成者。本书内容以Arduino和JavaScript为主线,开发物联网应用、手机App和操控微电脑

    大小:60.8 MB物联网

    点击下载

学习笔记