vue开发中vue-resource + canvas 图片压缩、上传、预览

1、使用vue-resource上传，也可以自定义ajax上传；

2、使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">标签，在submit的时候执行方法

3、正式代码  let oFiles = document.querySelector("#headerImage").files;　

4、压缩图片：

 modify_img_size (path, obj, callback) {

 //path可以是相对路径，也可以是base64位，我这里传的是bse64位
         var img = new Image();
         img.src = path;

         img.onload = function () {
 //图片加载初始化执行

           var that = this;
           var w = that.width,

             h = that.height,
             scale = w / h;
           w = obj.width || w;
           h = obj.height || (w / scale);
 //图片的质量为0.5，越小越模糊，文件也就越小
           var quality = 0.5;   

           //创建canvas画图
           var canvas = document.createElement('canvas');
           var ctx = canvas.getContext('2d');

           var anw = document.createAttribute("width");
           anw.nodeValue = w;
           var anh = document.createAttribute("height");
           anh.nodeValue = h;
           canvas.setAttributeNode(anw);
           canvas.setAttributeNode(anh);

           ctx.drawImage(that, 0, 0, w, h);

           if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
             quality = obj.quality;
           }

           var base64 = canvas.toDataURL('image/jpeg', quality);

           callback(base64);
         }

       }

5、读取二进制（base64位信息），let zipReady = new FileReader();      zipReady.readAsDataURL(oFiles[0]);   初始化读取base64，上传、预览：

  let _that = this;    

         zipReady.onload = function (e) {     //初始化开始

 //调用压缩方法，e.target.result为压缩结果 ， {width: 1000}为压缩后宽度，resImg为压缩之后的base64位回调函数结果

           _that.modify_img_size(e.target.result, {width: 1000}, function (resImg) {

 //转为8 位无符号整数值的类型化数组，存为图片信息，有返回值
             function dataURItoBlob(dataURI) {  

               var byteString;
               if (dataURI.split(',')[0].indexOf('base64') >= 0)
                 byteString = atob(dataURI.split(',')[1]);
               else
                 byteString = unescape(dataURI.split(',')[1]);
               // separate out the mime component
               var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
               // write the bytes of the string to a typed array
               var ia = new Uint8Array(byteString.length);
               for (var i = 0; i < byteString.length; i++) {
                 ia[i] = byteString.charCodeAt(i);
               }

               console.info(ia);
               return new Blob([ia], {type:mimeString});
             }

 //**********************************************************

             var blob = dataURItoBlob(resImg);    //将base64做处理

             let formDataImg = new FormData();

             formDataImg.append('multipart', blob, oFiles[0].name);
 //将从内存中读取处理之后的数据流blob插入form表单中，记得要给它取个名字，否则后端不能识别，我这里去的是原始图片的名字

             formDataImg.append('accessToken', aToken);

 //如果查过2M则提示图片太大，返回
             if (resImg.length > 2097152) {

               Toast(_that.$t('message.myInfo.tobig'))

               return true
             }

 //        预览图片，用户选择一次不满意，要重先选择，则要删掉这个img标签，重先创建一个img
             let getTempImgNode = document.getElementById('tempImg');
             if (getTempImgNode) {
               getTempImgNode.remove();

             }

             HTTP.postImg('/gate/v1/userExpandInfo/updateHeadPortrait', formDataImg).then(res => {

               if (res.code == 0) {

 //上传成功之后，再次读取base64信息，创建img，生成预览
                 let rdader = new FileReader();
                 rdader.readAsDataURL(oFiles[0]);

                 rdader.onload = function (e) {

                   let getPicParent = document.getElementById('changePic');
                   let newNode = document.createElement('img');
                   newNode.setAttribute('id', 'tempImg');
                   newNode.setAttribute('src', e.target.result);

                   getPicParent.appendChild(newNode)

                 };

                 return true;
               } else {
                 Toast(_that.$t('message.code[' + res.code + ']'));

               }

             })

           })

         };