vue 实现上传前图片压缩功能
2019-06-20 17:15
2631 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/KingCherry/article/details/93069039
首先,因为我这边项目是迭代的,只需要添加一个压缩功能,所以我这边是从获取到file之后开始写的。
1.前端: <el-upload action="/FileUpload" :http-request="uploadSectionFile" :show-file-list="false" style="display:inline-block" :disabled="AttachmentCategoryID==0" v-if="CanEdit"> <el-button type="primary" :disabled="AttachmentCategoryID==0">附件上传</el-button> </el-upload>
2、return{}里定义 return{ headerImage:, picValue:, }
3.上传前压缩的方法 uploadSectionFile(f) { // 附件上传 let self = this; let Orientation; let ndata; if(f.file.size<=1* 1024* 1024){ //判断图片是否大于1M,是就直接上传 ndata=f.file; self.postImg(ndata); }else{ //反之压缩图片 let reader = new FileReader(); // 将图片2将转成 base64 格式 reader.readAsDataURL(f.file); console.log(reader) // 读取成功后的回调 reader.onloadend = function () { let result = this.result; let img = new Image(); img.src = result; img.onload = function () { let data = self.compress(img,Orientation); self.headerImage = data; ndata= self.compress(img,Orientation); //BASE64转图片 var arr = ndata.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr = bstr.charCodeAt(n); } ndata=new File([u8arr],f.file.name, {type:mime}) self.postImg(ndata); } } } },async postImg (ndata) { let param = new FormData(); //创建form对象 param.append('file', ndata); //通过append向form对象添加数据 let config = { headers: { 'Content-Type': 'multipart/form-data' } } try { const response = await FileUpload(param, config) //此处写接口对应的vue方法 if (response.Code == 200) { this.handleFileUploadSuccess(response.Data) } } catch (error) { console.log(error)} }, compress(img,Orientation) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext('2d'); //瓦片canvas let tCanvas = document.createElement("canvas"); let tctx = tCanvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; //如果图片大于四百万像素,计算压缩比并将大小压至400万以下 let ratio; if ((ratio = width * height / 4000000) > 1) { console.log("大于400万像素") ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 let count; if ((count = width * height / 1000000) > 1) { console.log("超过100W像素"); count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //修复ios上传图片的时候 被旋转的问题 if(Orientation != "" && Orientation != 1){ switch(Orientation){ case 6://需要顺时针(向左)90度旋转 this.rotateImg(img,'left',canvas); break; case 8://需要逆时针(向右)90度旋转 this.rotateImg(img,'right',canvas); break; case 3://需要180度旋转 this.rotateImg(img,'right',canvas);//转两次 this.rotateImg(img,'right',canvas); break; } } //进行最小压缩 let ndata = canvas.toDataURL('image/jpeg', 0.1); console.log('压缩前:' + initSize); console.log('压缩后:' + ndata.length); console.log("ndata:"+ndata) console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%"); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; return ndata; }`
相关文章推荐
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- 移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
- vue实现压缩图片预览并上传功能(promise封装)
- Vue-resource如何实现表单提交以及file图片上传的压缩
- HTML5实现图片压缩上传功能
- JS和Canvas实现图片的预览压缩和上传功能
- HTML5实现图片压缩上传功能
- iOS实现压缩图片上传功能
- iOS实现图片压缩的两种方法及图片压缩上传功能
- vue.js 图片上传并预览及图片更换功能的实现代码
- vue 实现压缩图片上传到oss
- vue实现移动端图片裁剪上传功能
- 基于SpringBoot的图片上传组件,实现图片裁剪、Thumbnailator压缩的功能
- Android学习-使用Async-Http实现图片压缩并上传功能
- vue-quill-editor实现图片上传功能
- HTML5实现图片压缩上传功能
- vue实现的上传图片到数据库并显示到页面功能示例
- vue实现的上传图片到数据库并显示到页面功能示例
- cropper js基于vue的图片裁剪上传功能的实现代码
- java实现上传图片并压缩图片大小功能