vue中实现图片压缩 file文件的方法


Posted in Javascript onMay 28, 2020

项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下。(我已经拿到上传的file文件的前提下)

先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法

vue中实现图片压缩 file文件的方法

将图片压缩的方法写到这个公用的js(api.js)中

//base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)
function dataURLtoFile(dataurl) {
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], { type: mime });

}
//压缩图片
function compressImg(file){
  var src;
  var files;
  var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
  var read = new FileReader();
  read.readAsDataURL(file);
  return new Promise(function(resolve, reject){
   read.onload = function (e) {
     var img = new Image();
     img.src = e.target.result;
     img.onload = function(){
       //默认按比例压缩
       var w = this.width,
         h = this.height;
       //生成canvas
       var canvas = document.createElement('canvas');
       var ctx = canvas.getContext('2d');
       var base64;
       // 创建属性节点
       canvas.setAttribute("width", w);
       canvas.setAttribute("height", h);
       ctx.drawImage(this, 0, 0, w, h);
       if(fileSize<1){
         //如果图片小于一兆 那么不执行压缩操作
         base64 = canvas.toDataURL(file['type'], 1);
       }else if(fileSize>1&&fileSize<2){
         //如果图片大于1M并且小于2M 那么压缩0.5
         base64 = canvas.toDataURL(file['type'], 0.5);
       }else{
         //如果图片超过2m 那么压缩0.2
         base64 = canvas.toDataURL(file['type'], 0.2);
       }
       // 回调函数返回file的值(将base64编码转成file)
       files = dataURLtoFile(base64); //如果后台接收类型为base64的话这一步可以省略
       
       resolve(files)
     };
   };
  })
};

//结尾处将该方法暴露出来供外部调用
export default {	
 compressImg,
}

在main.js中引入公用js(api.js)

import api from './http/api.js' //这里注意自己的路径
Vue.prototype.$api = api  //注册为全局变量

接下来在需要的地方调用我们的公用方法

this.$api.compressImg()//调用

我的调用方法
图片压缩的方法为异步执行 使用async await 解决异步问题(需要等压缩完成后)

//上传前压缩图片
   async beforeRead(file){//async await 解决异步问题,
    var formData = new FormData();//创建新的form
    if(file.length){   //file.length为真的时候说明是多图上传  要循环多图将file对象放进form中
     for(let i=0;i<file.length;i++){
      var f = await this.$api.compressImg(file[i]) //await只能放在async函数里 await会等待异步方法的返回值拿到以后在执行后面的方法
     formData.set('file'+i,f)
     }
    }else{
     let f = await this.$api.compressImg(file)
     formData.set('file0',f)
    }
   }

然后将formData传给后台,生成图片的线上地址就OK了!

总结

到此这篇关于vue中实现图片压缩 file文件的方法的文章就介绍到这了,更多相关vue图片压缩内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 #Javascript
Vue实现附件上传功能
May 28 #Javascript
如何使用Javascript中的this关键字
May 28 #Javascript
简单了解JavaScript arguement原理及作用
May 28 #Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 #Javascript
js实现轮播图特效
May 28 #Javascript
JS写滑稽笑脸运动效果
May 28 #Javascript
You might like
PHP memcache扩展的三种安装方法
2009/04/26 PHP
smarty简单入门实例
2014/11/28 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python TCP通信客户端服务端代码实例
2019/11/21 Python
详解Python yaml模块
2020/09/23 Python
python 下载文件的多种方法汇总
2020/11/17 Python
Python如何批量生成和调用变量
2020/11/21 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
群众路线批评与自我批评
2014/02/06 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
房屋所有权证明
2014/10/20 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
如何在python中实现ECDSA你知道吗
2021/11/23 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers