Vue使用mixins实现压缩图片代码
本文介绍了Vue使用mixins实现压缩图片代码,分享给大家,具体如下:
图片压缩
创建mixinsimage-compress.js
exportdefault{ methods:{ /** *检查并压缩图片大小 */ checkAndHandleCompression(file){ returnnewPromise((resolve,reject)=>{ this.imgBase64(file,(image,canvas)=>{ letmaxSize=2*1024;//2M(单位KB) letfileSize=file.size/1024;//图片大小(单位KB) letuploadSrc,uploadFile; if(fileSize>maxSize){//如果图片大小大于maxSize,进行压缩 uploadSrc=canvas.toDataURL(file.type,maxSize/fileSize); uploadFile=this.convertBase64UrlToFile(uploadSrc,file.name);//转成file文件 }else{ uploadSrc=image.src; uploadFile=file; } letcompressedSize=uploadFile.size/1024;//压缩后图片大小(单位KB) //判断图片大小是否小于maxSize,如果大于则继续压缩至小于为止 if(compressedSize.toFixed(2)>maxSize){ this.checkAndHandleUpload(uploadFile); }else{ letfileOptions={uploadSrc,uploadFile}; resolve(fileOptions); } }); }); }, /** *将图片转化为base64 */ imgBase64(file,callback){ //看支持不支持FileReader if(!file||!window.FileReader)return; //创建一个Image对象 letimage=newImage(); //绑定load事件处理器,加载完成后执行 image.onload=function(){ //创建canvasDOM对象 letcanvas=document.createElement('canvas'); //返回一个用于在画布上绘图的环境,'2d'指定了您想要在画布上绘制的类型 letctx=canvas.getContext('2d'); //如果高度超标//参数,最大高度 letMAX_HEIGHT=3000; if(image.height>MAX_HEIGHT){ //宽度等比例缩放*= image.width*=MAX_HEIGHT/image.height; image.height=MAX_HEIGHT; } //获取canvas的2d环境对象, //可以理解Context是管理员,canvas是房子 ctx.clearRect(0,0,canvas.width,canvas.height); //重置canvas宽高 canvas.width=image.width; canvas.height=image.height; //将图像绘制到canvas上 ctx.drawImage(image,0,0,image.width,image.height); callback(image,canvas); }; if(/^image/.test(file.type)){ //创建一个reader letreader=newFileReader(); //将图片将转成base64格式 reader.readAsDataURL(file); //读取成功后的回调 reader.onload=function(){ //设置src属性,浏览器会自动加载。 //记住必须先绑定事件,才能设置src属性,否则会出同步问题。 image.src=this.result; }; } }, /** *把Base64转换成file文件 */ convertBase64UrlToFile(dataurl,filename){ letarr=dataurl.split(','), mime=arr[0].match(/:(.*?);/)[1], bstr=atob(arr[1]),n=bstr.length, u8arr=newUint8Array(n); while(n--){ u8arr[n]=bstr.charCodeAt(n); } returnnewFile([u8arr],filename,{type:mime}); } } };
example
...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。