ios手机上传竖拍照片旋转90度问题

利用exif.js插件解决ios手机上传竖拍照片旋转90度问题

问题描述：移动端手机照片上传时，发现手机上传竖拍图片会逆时针旋转90度，横拍照片无此问题，部分安卓手机存在此问题。

场景描述

解决思路

• 获取到照片拍摄的方向角，对非横排的ios照片进行角度旋转修正。
• EXIF.js提供了JavaScript读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、GPS地理位置等数据。我们可以通过这个插件获取到它的拍照方向Orientation属性，然后把所有的旋转了的图片都给正过来。
• Orientation属性说明

参数	旋转角度
1	0°
6	顺时针90°
8	逆时针90°
3	180°

Canvas旋转原理

• 除了canvas原点、宽度、长度的变化外，还需要用到rotate()方法来旋转当前的绘图。

  
  

以Vue为实例

步骤一 ：安装EXIF.js插件

  npm  install exif-js  --save

步骤二：在main.js中引入该插件，并将该插件挂载在vue的原型上

  import  EXIF form 'exif-js'

   Vue.prototype .EXIF=EXIF

步骤三 ：在具体的页面中进行使用

注意：需要将vue中的上下文this挂到其他变量上，不然会与exif.js中回调函数的this冲突。需等图片加载完成后才能画到canvas上。

    change:function () {
            let img =new Image();
            img.src='图片路径';
            img.setAttribute('crossOrigin', 'Anonymous');
            img.onload=function () {
              that.compressImg(img,(dataURL)=> {
                  //后续操
              });
           }
      },

 compressImg:function (img,callback) {
        let that = this;// 需要将Vue的原型挂在that上边，否则会与exif.js中回调函数的this冲突
        let canvas=document.getElementById('myCanvas');
        let ctx=canvas.getContext('2d');
        let initSize=img.src.length;
        let width=img.width;
        let height=img.height;
        canvas.width = width;
        canvas.height = height;
        that.EXIF.getData(img,function () { //解决IOS手机竖拍图片上传旋转的问题
          var imgData=that.EXIF.getAllTags(this);
          if(imgData.Orientation&&imgData.Orientation!=1){
            switch (imgData.Orientation){ //Orientation 拍摄方向,旋转角度
              case 6: //顺时针90°
                canvas.width=height;
                canvas.height=width;
                ctx.rotate(Math.PI/2);
                ctx.drawImage(img, 0, -height, width, height);
                break;
              case 3: //逆时针90°
                ctx.rotate(Math.PI);
                ctx.drawImage(img, -width, -height, width, height);
                break;
              case 8:  //180°
                canvas.width=height;
                canvas.height=width;
                ctx.rotate(3*Math.PI/2);
                ctx.drawImage(img, -width, 0, width, height);
                break;
            }
          }else{
            ctx.drawImage(img, 0, 0, width, height);
          }
        });
          let dataURL = canvas.toDataURL("image/jpeg", 0.1);
          callback?callback(dataURL):null; //调用回调函数
      },

参考文章：https://blog.csdn.net/qq_33769914/article/details/70154655