vue2.0_实现图片上传前进行压缩（约10倍）

前言

1、以VantUI组件库中van-uploader文件上传为例
2、本例以图片大于2M才开始压缩，压缩条件可自行调节
3、压缩完成得到图片的base64格式，可转换成file文件
4、读取到图片之后，上传图片base64格式编码到后台，返回对应ID

HTML

<van-uploader :after-read="afterReadOne"><img class="bg_img" src="../../../../assets/images/bg-1.png" v-if="identity == ''"><img class="identity_img" :src="identity" v-if="identity != ''">
</van-uploaader>

静态展示

压缩方法

//图片大于2M进行压缩
imgCompress(file){let fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);const img = new Image();img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)// let files = {};img.onload = () => {const canvas = document.createElement('canvas'); // 创建Canvas对象(画布)const context = canvas.getContext('2d');//默认按比例压缩let cw=img.width;let ch=img.height;let w=img.width;let h=img.height;canvas.width=w;canvas.height=h;if(cw>400 && cw>ch){w=400;h=(400*ch)/cw;canvas.width=w;canvas.height=h;}if(ch>400 && ch>cw){h=400;w=(400*cw)/ch;canvas.width=w;canvas.height=h;}//生成canvaslet base64;// 创建属性节点context.clearRect(0,0,0,w,h);context.drawImage(img, 0, 0, w, h);if(fileSize>2){//如果图片超过2m,则进行压缩base64 = canvas.toDataURL(file['type'], 0.94);}// files = this.dataURLtoFile(base64, file.file.name);// 将base64转换为file文件// console.log('压缩后的图片文件！', files);this.upLoadImg(base64);//图片上传服务的请求方法，这边我就不写出来了！};
}

base64转换成file文件

// 将base64转换为file文件
dataURLtoFile (dataurl, filename) {let arr = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n)}let file = new File([u8arr], filename, {type: mime});const data = { //拼成你所需要传给后端的格式file:file,content:dataurl,message:'',status:''};return data
}

未压缩前，file文件的展示

压缩完成之后，file文件的展示

注：以上压缩方式，差不多压缩了10倍左右。

vue2.0_实现图片上传前进行压缩（约10倍）相关推荐

html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
移动端图片上传后进行压缩功能
移动端图片上传后进行压缩功能在进行讲解上传图片压缩之前,我们先来了解下HTML5中的文件上传的基本知识点. 一: FileList对象与file对象. FileList对象表示用户选择的文件列表.在 ...
php 图片压缩旋转,移动端图片上传旋转、压缩问题的解决方案
本篇文章就给大家带来移动端图片上传旋转.压缩问题的解决方案.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 前言在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片 ...
jQuery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
UEditor之基于Java图片上传前后端源码研究
那么开始吧! 这是我的项目目录 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调用 ...
vue2或者vue3图片上传功能（upload）
采用element ui中upload组件上传,目前支持上传单张图片,如果多张可进行更改. 一.页面上组件使用注意:①如果是多张图片,file-list会用到.②name是申明上传文件的格式,可以和 ...
h5压缩图片上传 php_一键压缩，图片上传大小不得超过200K？
今天分享一款压缩图片的小程序,它的名字就叫"图片压缩",多么简单粗暴好理解! 我们在网站实名认证或者上传电子图片的时候,经常被要求上传图片的大小不得超过一定限制,比如:图片不得超过 ...

vue2.0_实现图片上传前进行压缩（约10倍）

前言

HTML

静态展示

压缩方法

base64转换成file文件

未压缩前，file文件的展示

压缩完成之后，file文件的展示

vue2.0_实现图片上传前进行压缩（约10倍）相关推荐

最新文章

热门文章