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编码内容
	
      };
      // 此时可以自行将文件上传至服务器
    },
}