ios 移动端拍照 旋转问题

这段时间开发时发现 ios14 会自动判断图片得方向  ios13及一下 不会 所以需要我们代码去判断

首先需要引入 exif-js

npm install exif-js --save    

photoChange(el) {
   this.$vux.loading.show({
     text: '图片上传中'
   })
   var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
   var type = file.type.split('/')[0];
   if ( type === 'image' ){
     //将图片img转化为base64
     var that = this;
     var orientation = ''
     EXIF.getData(file, function () {
        orientation = EXIF.getTag(this, 'Orientation');
     });
       const reader = new FileReader();
       reader.readAsDataURL(file);
       reader.onload = function(evt){
       const base64 = evt.target.result;
       // 将图片旋转到正确的角度 并压缩
       console.log('方向',orientation)
       that.resetOrientation(base64, orientation, function (resultBase64) {
          that.b64toBlob(resultBase64, function (blob) {
            //调用接口上传图片
            that.upload(blob)
          });
        });
       }
   }else{
     alert('上传了非图片');
   }
}

resetOrientation(srcBase64, srcOrientation, callback) {
      var self = this
      const img = new Image();
      img.onload = function () {
        const width = img.width,
          height = img.height,
          canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d');
        // 判断图片尺寸压缩一定比率
        const big = (img.width > img.height) ? img.width : img.height;
        let rate = 1;
        if (big > 840) {
          rate = 840 / big;
        }
        canvas.width = width * rate;
        canvas.height = height * rate;
        // 安卓机不需要矫正图片
        var u = navigator.userAgent;
        var ios = 0
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        if (!isAndroid) {
          ios = navigator.userAgent.match(/os\s+(\d+)/i)[1] - 0
        }
        if (isAndroid || ios < 14) {
          if(srcOrientation && srcOrientation !== 1){
        // 判断图片方向，压缩并矫正
            switch (srcOrientation) {
            // 当图片旋转180°时
              case 3:
                ctx.rotate(Math.PI);
                ctx.drawImage(this, -this.width * rate, -this.height * rate, this.width * rate, this.height * rate);
                break;
          // 当图片旋转90°时
              case 6:
                canvas.width = this.height * rate;
                canvas.height = this.width * rate;
                ctx.rotate(Math.PI / 2);
                // (0,-imgHeight) 从旋转原理图那里获得的起始点
                ctx.drawImage(this, 0, -this.height * rate, this.width * rate, this.height * rate);
                break;
          // 当图片旋转270°时
              case 8:
                canvas.width = this.height * rate;
                canvas.height = this.width * rate;
                ctx.rotate(3 * Math.PI / 2);
                ctx.drawImage(this, -this.width * rate, 0, this.width * rate, this.height * rate);
                break;
              default:
                ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
            }
          }else {
            ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
          }
        } else if (ios >= 14) {
          ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
        }
        // 返回 base64
        callback(canvas.toDataURL('image/jpeg'));
      };
      img.src = srcBase64;
    },

b64toBlob(b64, onsuccess, onerror) {
      let img = new Image();
      img.onerror = onerror;
      img.onload = function onload() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        let width = img.width;
        let height = img.height;
        let ctx = canvas.getContext('2d');
        let rate = 1;
        ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
        canvas.toBlob(onsuccess);
      };
      img.src = b64;
    },

upload(imgUrl){
      let self = this
      var formdata = new FormData();
      formdata.append('file',imgUrl);//下面是要传递的参数
      formdata.append('assetsNo',this.assetsNo);//下面是要传递的参数
      this.axios.post(this.apiUrl +'/xxxxxx',
      formdata
      ,{
      headers: {
        'token': this.token,
        'Content-Type':'multipart/form-data'
        }//设置header信息
     }).then((response)=>{
        if(response.data.errCode==0){
          self.$vux.loading.hide()
          self.getInventoryInfo()
        }else{
          console.log(response)
        }
      }).catch((response)=>{
        console.log(response);
      })
    },