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 + ']'));

              }

            })

          })

        };