项目场景：

使用uni-app框架开发移动端H5，功能需求有需要调用手机摄像头拍照识别人脸

问题描述：

苹果手机拍照无异常，安卓手机拍照照片照片显示时会自动旋转90度显示

解决方案：

1.判断手机机型：由于苹果机拍照上传照片不会旋转，如果默认修正，苹果机也会出现旋转异常。

onLoad(options) {
    //判断设备机型
    let that = this;

    (function () {
      var u = navigator.userAgent;

      var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //android终端或者uc浏览器

      var isiOS = u.indexOf("iPhone") > -1; //苹果手机

      if (isiOS) {
        that.tipFlag = "ios";
      }
      if (isAndroid) {
        that.tipFlag = "Android";
      }
    })();
  },

2.导入exif插件

import EXIF from '@/utils/exif.js'

3.uni.chooseImage选择上传图片，获取到res后的blod

data() {
		return {
			maxSize:10,
			resImg:''
		}
	},
	
methods: {	
insertImage() {
		uni.chooseImage({
			count: 1,
			size:10*1000000,
			sizeType: ['compressed'],
			success: (res) => {
				//这是需求要求的上传限制，可以不要
				if (parseInt(tempFiles.size) > this.maxSize * 1024 * 1024) {
					uni.showToast({
						title: '图片大于'+this.maxSize+'MB！',
						icon: 'none'
					})
				} else {
					this.resImg = res.tempFilePaths[0]//这就是要的blod
					this.detail(this.resImg)
				}	
			}
		})
	},
}

4.调用this.detail方法做图片处理，这里还用到了this.comprossImage图片压缩和this.getImageTag图片方法，以及最后对图片修正处理方法this.rotateImg。

		//url 就是上面获取到的blod
		async detail(url){
	     let maxWidth = 500;  
	     let Orientation = 1;  
	     //获取图片META信息  
	     await this.getImageTag(url, 'Orientation', function(e) {  
	         if(e != undefined) Orientation = e;  
	     })  
	     var img = null;  
	     var canvas = null;  
	     await this.comprossImage(url, maxWidth, function(e) {  
	         img = e.img;  
	         canvas = e.canvas;  
	     })  
	 
	     console.log(Orientation,"Orientation")  
	     let baseStr = '';  
	     //如果方向角不为1，都需要进行旋转  
	     switch(Orientation){  
	         case 6://需要顺时针（向右）90度旋转  
	             baseStr = this.rotateImg(img,'right',canvas);  
	             break;  
	         case 8://需要逆时针（向左）90度旋转   
	             baseStr = this.rotateImg(img,'left',canvas);  
	             break;  
	 
	         case 3://需要180度旋转 转两次  
	             baseStr = this.rotateImg(img,'right',canvas, 2);  
	             break;  
	         default:  
	             baseStr = this.rotateImg(img,'',canvas);  
	             break;  
	     }  
			console.log(baseStr,"baseStr")
			this.uploadImg(baseStr)//图片上传到服务器的方法
	 },
	 
	 //-------------------------------直接粘贴的三个方法
	 	 async comprossImage(imgSrc, maxWidth, func){  
	     if(!imgSrc) return 0;  
	     return new Promise((resolve, reject) => {  
	         uni.getImageInfo({  
	             src: imgSrc,  
	             success(res) {  
	                 let img = new Image();  
	                 img.src = res.path;  
	                 console.log(img)  
	 
	                 let canvas = document.createElement('canvas');  
	 
	                 let obj = new Object();  
	                 obj.img = img;  
	                 obj.canvas = canvas;  
	                 resolve(func(obj));  
	             }  
	         });  
	     })  
	 },
	  /**  
	  * @desc 获取图片信息，使用exif.js库，具体用法请在github中搜索  
	  * @param {Object} file 上传的图片文件  
	  * @param {String} tag 需要获取的信息 例如：'Orientation'旋转信息  
	  * @return {Promise<Any>} 读取是个异步操作，返回指定的图片信息  
	  */  
	getImageTag(file, tag, suc){  
	     if (!file) return 0;  
	     return new Promise((resolve, reject) => {  
	         /* eslint-disable func-names */  
	         // 箭头函数会修改this，所以这里不能用箭头函数  
	         let imgObj = new Image()  
	         imgObj.src = file  
	         console.log(imgObj)  
	         uni.getImageInfo({  
	             src: file,  
	             success(res) {  
	                 EXIF.getData(imgObj, function () {  
	                     EXIF.getAllTags(this);    
	                     let or = EXIF.getTag(this,'Orientation');//这个Orientation 就是我们判断需不需要旋转的值了，有1、3、6、8  
	                     resolve(suc(or))  
	                 });  
	             }  
	         })  
	     });  
	 },
	 	 rotateImg(img, direction, canvas, times = 1){   
	     console.log('开始旋转')  
	     //最小与最大旋转方向，图片旋转4次后回到原方向    
	     var min_step = 0;    
	     var max_step = 3;    
	     if (img == null)return;    
	 
	     //img的高度和宽度不能在img元素隐藏后获取，否则会出错    
	     var height = img.height;    
	     var width = img.width;    
	     let maxWidth = 500;  
	     let canvasWidth = width; //图片原始长宽  
	     let canvasHeight = height;  
	     let base = canvasWidth/canvasHeight;  
	     console.log(maxWidth);  
	     if(canvasWidth > maxWidth){  
	         canvasWidth = maxWidth;  
	         canvasHeight = Math.floor(canvasWidth/base);  
	     }  
	     width = canvasWidth;  
	     height = canvasHeight;  
	     var step = 0;    
	 
	     if (step == null) {    
	       step = min_step;    
	     }    
	 
	     if (direction == 'right') {    
	       step += times;    
	       //旋转到原位置，即超过最大值    
	       step > max_step && (step = min_step);    
	     } else if(direction == 'left'){    
	       step -= times;    
	       step < min_step && (step = max_step);    
	     } else {    //不旋转  
	         step = 0;  
	     }  
	 
	     //旋转角度以弧度值为参数    
	     var degree = step * 90 * Math.PI / 180;    
	     var ctx = canvas.getContext('2d');    
	     console.log(degree)  
	     console.log(step)  
	     switch (step) {      
	       case 1:    
	         console.log('右旋转 90度')  
	         canvas.width = height;    
	         canvas.height = width;    
	         ctx.rotate(degree);    
	         ctx.drawImage(img, 0, -height, width, height);    
	         break;    
	       case 2:    
	         //console.log('旋转 180度')  
	         canvas.width = width;    
	         canvas.height = height;    
	         ctx.rotate(degree);    
	         ctx.drawImage(img, -width, -height, width, height);    
	         break;    
	       case 3:    
	         console.log('左旋转 90度')  
	         canvas.width = height;    
	         canvas.height = width;    
	         ctx.rotate(degree);    
	         ctx.drawImage(img, -width, 0, width, height);  
	         break;    
	       default:  //不旋转  
	         canvas.width = width;  
	         canvas.height = height;  
	         ctx.drawImage(img, 0, 0, width, height);  
	         break;  
	     }  
	 
	     let baseStr = canvas.toDataURL("image/jpeg", 1);  
	     return baseStr;  
	 },
	 //-----------------------------------------------结束
	 uploadImg(tempFilePaths) {
			console.log(tempFilePaths,"触发上传接口")
			uni.uploadFile({
				url: '服务器地址',
				filePath: tempFilePaths,
				fileType:"image",
				header:{"Authorization":'Bearer ' + localStorage.getItem('token')},
				name: 'file',
				success: (res) => {
					uni.hideLoading()
					let resObj = JSON.parse(res.data)
					if (resObj.meta.code === 200) {
						let data = resObj.data.url;
						console.log(data)
					} 
				}
		}