exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本 ）

exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4 ）

问题描述：

在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现

iOS 13.4 更新后带来的问题

然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。

---

解决方案：

利用exif.js读取照片的拍摄信息

安装exif.js

1.npm install exif-js --save
2.在对应的vue模块引入：import EXIF from “exif-js”;

exif.js中 Orientation 属性说明如下：

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

项目中使用：

在vue文件中

<script>
import EXIF from "exif-js";
export default {
	methods: {
	    afterRead(file) {
	      var self = this;
	      let Orientation = null;
	      //去获取拍照时的信息，解决拍出来的照片旋转问题 file.file为文件对象
	      EXIF.getData(file.file, function () { 
	        Orientation = EXIF.getTag(this, "Orientation");
	      });
	      var img = new Image(),
	        width = 512, //image resize   压缩后的宽
	        quality = 0.9, //image quality  压缩质量
	        canvas = document.createElement("canvas"),
	        drawer = canvas.getContext("2d");
	      img.src = file.content;
	      img.onload = function () {
	        //利用canvas压缩图片
	        canvas.width = width;
	        canvas.height = width * (img.height / img.width);
	        /**
	         * 自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了
	         * 获取ios 的系统版本号，在13.4版本之前需要旋转，之后就不需要了
	         */
	        var str= navigator.userAgent.toLowerCase(); 
	        var ver=str.match(/cpu iphone os (.*?) like mac os/);
	        // console.log("你当前的Ios系统版本为："+ver[1].replace(/_/g,"."))
	        console.log(ver[1].replace(/_/g,".")<'13.4')
	        if ((ver[1].replace(/_/g,".")<'13.4') && Orientation && Orientation != 1) {
	          switch (Orientation) {
	            case 6: // 旋转90度
	            console.log(Orientation)
	              drawer.rotate(Math.PI / 2);
	              drawer.drawImage(img, 0, -canvas.height, canvas.width, canvas.height);
	              break;
	            case 3: // 旋转180度
	              drawer.rotate(Math.PI);
	              drawer.drawImage(img, -canvas.width, -canvas.height, canvas.width, canvas.height);
	              break;
	            case 8: // 旋转-90度
	              drawer.rotate((3 * Math.PI) / 2);
	              drawer.drawImage(img, -canvas.width, 0, canvas.width, canvas.height);
	              break;
	          }
	        } else {
	          drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
	        }
	
	        var base64 = canvas.toDataURL("image/*", quality);
	        var pic = base64.split(",")[1]; //图片的base64编码内容
	
      };
      // 此时可以自行将文件上传至服务器
    },
}

// 兼容性处理方法来源于：vue-cropper@0.5.5   仅供参考

checkOrientationImage(img, orientation, width, height) {
      // 如果是 chrome内核版本在81 safari 在 605 以上不处理图片旋转
      // alert(navigator.userAgent)
      if (this.getVersion("chrome")[0] >= 81) {
        orientation = -1;
      } else {
        if (this.getVersion("safari")[0] >= 605) {
          const safariVersion = this.getVersion("version");
          if (safariVersion[0] > 13 && safariVersion[1] > 1) {
            orientation = -1;
          }
        } else {
          //  判断 ios 版本进行处理
          // 针对 ios 版本大于 13.4的系统不做图片旋转
          const isIos = navigator.userAgent
            .toLowerCase()
            .match(/cpu iphone os (.*?) like mac os/);
          if (isIos) {
            let version = isIos[1];
            version = version.split("_");
            if (version[0] > 13 || (version[0] >= 13 && version[1] >= 4)) {
              orientation = -1;
            }
          }
        }
      }

      // alert(`当前处理的orientation${orientation}`)
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      ctx.save();

      switch (orientation) {
        case 2:
          canvas.width = width;
          canvas.height = height;
          // horizontal flip
          ctx.translate(width, 0);
          ctx.scale(-1, 1);
          break;
        case 3:
          canvas.width = width;
          canvas.height = height;
          //180 graus
          ctx.translate(width / 2, height / 2);
          ctx.rotate((180 * Math.PI) / 180);
          ctx.translate(-width / 2, -height / 2);
          break;
        case 4:
          canvas.width = width;
          canvas.height = height;
          // vertical flip
          ctx.translate(0, height);
          ctx.scale(1, -1);
          break;
        case 5:
          // vertical flip + 90 rotate right
          canvas.height = width;
          canvas.width = height;
          ctx.rotate(0.5 * Math.PI);
          ctx.scale(1, -1);
          break;
        case 6:
          canvas.width = height;
          canvas.height = width;
          //90 graus
          ctx.translate(height / 2, width / 2);
          ctx.rotate((90 * Math.PI) / 180);
          ctx.translate(-width / 2, -height / 2);
          break;
        case 7:
          // horizontal flip + 90 rotate right
          canvas.height = width;
          canvas.width = height;
          ctx.rotate(0.5 * Math.PI);
          ctx.translate(width, -height);
          ctx.scale(-1, 1);
          break;
        case 8:
          canvas.height = width;
          canvas.width = height;
          //-90 graus
          ctx.translate(height / 2, width / 2);
          ctx.rotate((-90 * Math.PI) / 180);
          ctx.translate(-width / 2, -height / 2);
          break;
        default:
          canvas.width = width;
          canvas.height = height;
      }

      ctx.drawImage(img, 0, 0, width, height);
      ctx.restore();
      canvas.toBlob(
        blob => {
          let data = URL.createObjectURL(blob);
          URL.revokeObjectURL(this.imgs);
          this.imgs = data;
        },
        "image/" + this.outputType,
        1
      );
    },

转载于：https://blog.csdn.net/weixin_50535566/article/details/114927099