移动前端图片压缩

来源：互联网发布：滑雪服品牌知乎编辑：程序博客网时间：2024/05/17 00:16

移动端压缩图片并且上传基本流程：
　1、input file上传图片时，用URL方法将file赋值给img对象
　2、将img绘制到canvas上，调用canvas.toDataURL对图片进行压缩
　3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再上传
上代码：

<!DOCTYPE html><html>  <head>    <meta charset='UTF-8'>    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>    <title>移动前端图片压缩上传</title>     <style>       *{margin:0; padding:0;}     </style>  </head>  <body>    <div id="app">        <p>{{message}}</p>        <input type="file" accept="image/*" @change="getImage"/>    </div>    <script src="vue.js"></script>    <script>    //创建一个Vue实例(ViewModel): 负者连接View与Model    let app = new Vue({      el: '#app',      data: {message: '图片压缩!'},      methods: {        /*第一步：获取 file 对象, file --> img*/        getImage: function(event){          let self = this;          let file = event.target.files[0];          let img = new Image();          /*img.src 如果用FileReader异步读取获取file的base64数据赋值，在            移动端base64数据过大时，会导致赋值过程很慢*/          img.src = URL.createObjectURL(file);          img.onload = function(){              self.imgToCanvas(img);          }        },        /*第二步：img -->canvas,调用canvas.toDataURL压缩,返回压缩后的base64数据*/        imgToCanvas: function(img){          let self = this;          //ios 拍摄的照片大于5M时，同比例缩小          let width = img.width;          let height = img.height;          let ratio  = width*height/5000000;          if(ratio > 1){              ratio = Math.sqrt(ratio);              width /= ratio;              height /= ratio;          }else{              ratio = 1;          }          let cvs = document.createElement('canvas');          let ctx = cvs.getContext('2d');          ctx.drawImage(img,0,0,width,height);         //压缩比例：0.5,可根据实际情况设置          let compressData = cvs.toDataURL('image/jpeg',0.5);          /*计算压缩后文件大小：22 base64前缀  2 base64最后的2个等号            dataStr/8*2: base64字符流每8个字符有2个0补充            let dataStr = compressData.substring(22).length-2;            console.log(parseInt(dataStr-(dataStr/8)*2));*/          self.upload(compressData);        },        /*第三步：上传压缩后的图片数据*/        upload: function(){        }      }    });    </script>  </body></html>

参考： https://yq.aliyun.com/wenji/391

阅读全文

0 0