Vue 压缩并且处理图片旋转的问题

1. npm下载exif-js包
文档

npm install exif-js --save  

用于获取图片的旋转状态

2.压缩旋转

 compressImg(img, fileName) {
      // 压缩图片
      let Orientation = this.getExif(img); // 获取图片角度 1:0°正常 3:180° 6:顺时针90° 8: 逆时针90°
       let canvas = document.createElement("canvas");
       let ctx = canvas.getContext("2d");
       //瓦片canvas
       let tCanvas = document.createElement("canvas");
       let tctx = tCanvas.getContext("2d");
       let width = img.width;
       let height = img.height;
       // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
       let ratio;
       if ((ratio = (width * height) / 4000000) > 1) {
         ratio = Math.sqrt(ratio);
         width /= ratio;
         height /= ratio;
       } else {
         ratio = 1;
       }
       canvas.width = width;
       canvas.height = height;
       // 铺底色
       ctx.fillStyle = "#fff";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       //如果图片像素大于100万则使用瓦片绘制
       let count;
       if ((count = (width * height) / 1000000) > 1) {
         count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
         // 计算每块瓦片的宽和高
         let nw = ~~(width / count);
         let nh = ~~(height / count);
         tCanvas.width = nw;
         tCanvas.height = nh;
         for (let i = 0; i < count; i++) {
           for (let j = 0; j < count; j++) {
             tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
             ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
           }
         }
       } else {
          ctx.drawImage(img, 0, 0, width, height)
       }
       if (Orientation && Orientation !== 1) {
        switch (Orientation) {
          case 6:
            canvas.width = height
            canvas.height = width
            ctx.rotate(Math.PI / 2)
            ctx.drawImage(img, 0, -height, width, height)
            console.log('旋转');
            break
          case 3:
            ctx.rotate(Math.PI)
            ctx.drawImage(img, -width, -height, width, height)
            break
          case 8:
            canvas.width = height
            canvas.height = width
            ctx.rotate(3 * Math.PI / 2)
            ctx.drawImage(img, -width, 0, width, height)
            break
        }
       }
       //进行最小压缩
       let ndata = canvas.toDataURL("image/jpeg", 0.1);
       tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
       //将base64转换为文件
       let arr = ndata.split(',');
       let mime = arr[0].match(/:(.*?);/)[1];
       let bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
       while(n--){
           u8arr[n] = bstr.charCodeAt(n);
       }
       return new File([u8arr], fileName, {type:mime});
     },
     getExif(file) {
       // 获取图片旋转方向
      let Orientation = '';
      Exif.getData(file, function() {
        Orientation = Exif.getTag(this, 'Orientation');
       });
      return Orientation;
    },