vue下输入实现图片上,传压缩,拼接以及旋转的案例 - 行业资讯

　　介绍

小编给大家分享一下vue下输入实现图片上,传压缩,拼接以及旋转的案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候,你会发现都是你瞎操作了,真相就是这么简单、下面进入正题:

<强>图片文件上传

现在很多项目实现在系统内保存图片,大多数只是在系统数据库内保存对应图片的url,而实际的图片资源会放在阿里等图片服务器上,当然,也有一些项目会选择在自己的数据库中保存图片base64格式的字符串、下面讲一些这两种方法的具体实现,实现以一个vue实例来说明:

首先,我们先要从用户那里获取图片资源,这个时候,我们需要用到html的& lt; input>标签,值类型为文件,指定输入标签为文件类型的表单输入,并将其接受属性设置为“图像/*“,指定只接受图片资源的文件;

& lt;输入类型=癴ile"接受=巴枷?*”;/在

接下来,我们就要获取用户选择的文件,当用户选择完文件的时候,就会触发输入标签的改变事件,我们可以通过监听该事件,并获取事件对象事件,来获取图片文件:

& lt;输入接受=巴枷?*”;风格=跋允?没有;“:name=? # 39; img & # 39; + index"类型=癴ile":id=? # 39; img & # 39; + index" 　　@change=癴ileChange(事件,美元指数)“/祝辞

当点击获取文件后,我们可以通过美元事件对象,获取event.target美元。文件[0]来获取图片资源文件对象,至于为什么要加索引值,是因为文件上输入表传单是支持多文件上传的,只需要在输入标签上增加多个属性;我们可以看看下图文件对象的一些属性:

观察后发现,文件对象中存在一个大小属性,表明图片的大小,我们可以通过验证该属性的值是否为空,来达到检验文件是否已经被我们获取到指定操作,

fileChange (el、索引){ 　　如果(! el.target.files [0] .size)返回; 　　}

至此,我们已经获取到我们想要的文件对象,接下来,我们实现图片压缩功能,命名为压缩函数:

图片压缩

首先,我们要对我们的图片资源进行压缩,第一步肯定是获取图片资源呐,获取后对其简单的校验;

这里可能有些人对FileReader对象不了解,FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象指定要读取的文件或数据,这里我们主要是用于监听onload来判断是否读取完成,读取完成时,我们把读取的结果赋值给我们新创建的形象对象,作为后面压缩的对象,这是时候,我们会发现,我们读取后的结果其实是一个base64格式的字符串
(很长…,我就意思意思)

此时,我们会发现,base64的字符串在这里就出现了,它可以作为一个值复制给& lt; img>标签的src属性,同样可以达到渲染图片的目标,因此也有人选择保存该格式的图片;但是着并非主流的方式,同时也会造成我们数据库过于冗余;

压缩(事件){ 　　var文件=event.target.files; 　　var=new FileReader读者(),imgFile[0]=文件; 　　如果(imgFile.type.indexOf(& # 39;图像# 39;)==0){ 　　reader.readAsDataURL (imgFile); 　　其他}{ 　　美元。Message.infor(& # 39;文件类型仅为图片& # 39;) 　　} 　　让img=新形象(); 　　读者。onload=function (e) { 　　img。src=https://www.yisu.com/zixun/e.target.result; 　　}; 　　}

图片进行压缩,我们主要是利用帆布是实现该功能,通过canvas.getContext (& # 39; 2 d # 39;) .drawImage()方法重新绘制图片,并利用画布。toDataURL(类型、encoderOptions)方法返回一个包含图片展示的dataURI,类型为图片格式,encoderOptions为图片的清晰度,0到1递增,这个压缩的过程不难理解,思路就是获取图片的高宽,计算其像素大小,并与以一个自己设定的界限值进行比较,来看一下我们大小是否需要压缩,如例子中的比率表示图片宽高的压缩比例,我们是可以实现不改宽高来修改图片的文件大小,通过drawImage(形象,sx, sy,向下,sHeight, dx, dy, dWidth, dHeight)重新绘制图片,他可以传进九个参数,分别代表着绘制到上下文的元素,源图像的矩形选择框的左上角X坐标,源图像的矩形选择框的左上角Y坐标,源图像的矩形选择框的宽度,源图像的矩形选择框的高度,目标画布的左上角在目标画布上X轴的位置,目标画布的左上角在目标画布上Y轴的位置,在目标画布上绘制图像的宽度,在目标画布上绘制图像的高度;