关于解决ios拍照上传图片旋转90度的问题

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

前言

在手机端开发中，通常会有上传图片的功能，当拍照上传图片，有时候会出现自动旋转90度，下面我列了解决方式，注意还需要引用几个js。

<!--引用-->
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/exif.js"></script>
<script src="../js/localResizeIMG.js"></script>
<script src="../js/mobileBUGFix.mini.js"></script>

<!--修改localResizeIMG.js-->
$.fn.localResizeIMG = function(obj) {
	this.on('change', function() {
		var file = this.files[0];
		var URL = window.URL || window.webkitURL;
		var blob = URL.createObjectURL(file);
 
		if ($.isFunction(obj.before)) {
			obj.before(this, blob, file)
		};
		_create(blob, file);
		this.value = '';
	});
 
	function _create(blob, file) {
		var img = new Image();
		img.src = blob;
		var orient = null;
		EXIF.getData(file, function() {
			//判断图片是否旋转
			EXIF.getAllTags(this);
			orient = EXIF.getTag(this, 'Orientation');
		});
		img.onload = function() {
			var that = this;
			var w = that.width,
				h = that.height,
				scale = w / h;
			w = obj.width || w;
			h = w / scale;
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			$(canvas).attr({
				width: w,
				height: h
			});
			ctx.drawImage(that, 0, 0, w, h);
			var base64 = null;
			if (navigator.userAgent.match(/iphone/i)) {
				if (orient != "" && orient != 1) {
					switch (orient) {
						case 6: //需要顺时针（向左）90度旋转
							rotateImg(this, 'left', canvas);
							break;
						case 8: //需要逆时针（向右）90度旋转
							rotateImg(this, 'right', canvas);
							break;
						case 3: //需要180度旋转
							rotateImg(this, 'right', canvas); //转两次
							rotateImg(this, 'right', canvas);
							break;
					}
				}
				// var mpImg = new MegaPixImage(img);
				// mpImg.render(canvas, {
				// 	maxWidth: w,
				// 	maxHeight: h,
				// 	quality: obj.quality || 0.8
				// });
				// base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
				base64 = canvas.toDataURL("image/jpeg", 0.8);
			} else if (navigator.userAgent.match(/Android/i)) {
				var encoder = new JPEGEncoder();
				base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
			} else {
				if (orient != "" && orient != 1) {
					switch (orient) {
						case 6: //需要顺时针（向左）90度旋转
							rotateImg(this, 'left', canvas);
							break;
						case 8: //需要逆时针（向右）90度旋转
							rotateImg(this, 'right', canvas);
							break;
						case 3: //需要180度旋转
							rotateImg(this, 'right', canvas); //转两次
							rotateImg(this, 'right', canvas);
							break;
					}
				}
				base64 = canvas.toDataURL("image/jpeg", 0.8);
			}
 
			var result = {
				base64: base64,
				clearBase64: base64.substr(base64.indexOf(',') + 1)
			};
			obj.success(result);
		};
	}
 
 
	function rotateImg(img, direction, canvas) {
		//alert(img); 
		//最小与最大旋转方向，图片旋转4次后回到原方向  
		var min_step = 0;
		var max_step = 3;
		//var img = document.getElementById(pid);  
		if (img == null) return;
		//img的高度和宽度不能在img元素隐藏后获取，否则会出错  
		var height = img.height;
		var width = img.width;
		//var step = img.getAttribute('step');  
		var step = 2;
		if (step == null) {
			step = min_step;
		}
		if (direction == 'right') {
			step++;
			//旋转到原位置，即超过最大值  
			step > max_step && (step = min_step);
		} else {
			step--;
			step < min_step && (step = max_step);
		}
		//img.setAttribute('step', step);  
		/*var canvas = document.getElementById('pic_' + pid);  
		if (canvas == null) {  
		  img.style.display = 'none';  
		  canvas = document.createElement('canvas');  
		  canvas.setAttribute('id', 'pic_' + pid);  
		  img.parentNode.appendChild(canvas);  
		} */
		//旋转角度以弧度值为参数  
		var degree = step * 90 * Math.PI / 180;
		var ctx = canvas.getContext('2d');
		switch (step) {
			case 0:
				canvas.width = width;
				canvas.height = height;
				ctx.drawImage(img, 0, 0);
				break;
			case 1:
				canvas.width = height;
				canvas.height = width;
				ctx.rotate(degree);
				ctx.drawImage(img, 0, -height);
				break;
			case 2:
				canvas.width = width;
				canvas.height = height;
				ctx.rotate(degree);
				ctx.drawImage(img, -width, -height);
				break;
			case 3:
				canvas.width = height;
				canvas.height = width;
				ctx.rotate(degree);
				ctx.drawImage(img, -width, 0);
				break;
		}
	}
 
};