利用exif.js解決ios手機上傳豎拍照片旋轉90度問題

時間 2019-11-20

標籤利用 exif.js exif 解決 ios 手機上傳拍照旋轉問題欄目 JavaScript 简体版

原文原文鏈接

在進行移動端手機照片上傳時，iOS手機上傳豎拍照片逆時針旋轉90度，橫排則無此問題；安卓手機則沒這個問題。javascript

所以解決這個問題的思路是：獲取到照片拍攝的方向角，對非橫拍的iOS照片進行角度旋轉修正。html

利用exif.js讀取照片的拍攝信息，詳見：http://code.ciaoca.com/javascript/exif-js/java

主要代碼以下：jquery

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>圖片上傳</title>  
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>  
    <script type="text/javascript" src="js/exif.js" ></script>   
</head>  
<body>  
    <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">  
		上傳圖片:  
		<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />    //調取手機攝像頭的屬性
	</div>  
	<div style="margin-top: 10px;">  
		<img alt="preview" src="" id="myImage" width="180" />  
	</div>
</body>  
</html>  
<script>

$('#uploadImage').on('change',function(){
	selectFileImage(this);
});

function selectFileImage(fileObj) {
	var file = fileObj.files['0'];  
	//圖片方向角 added by lzk  
	var Orientation = null;  
	  
	if (file) {  
		console.log("正在上傳,請稍後...");  
		var rFilter = /^(image\/jpeg|image\/png)$/i; // 檢查圖片格式  
		if (!rFilter.test(file.type)) { 
			console.log("請選擇jpeg、png格式的圖片");
			return;  
		}
		//獲取照片方向角屬性，用戶旋轉控制  
		EXIF.getData(file, function() {  
			// alert(EXIF.pretty(this));  
			EXIF.getAllTags(this);   
			//alert(EXIF.getTag(this, 'Orientation'));   
			Orientation = EXIF.getTag(this, 'Orientation');  
			//return; 
		});  
		  
		var oReader = new FileReader();  
		oReader.onload = function(e) {
			var image = new Image();  
			image.src = e.target.result;  
			image.onload = function() {  
				var expectWidth = this.naturalWidth;  
				var expectHeight = this.naturalHeight;    
				if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {  
					expectWidth = 800;  
					expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;  
				} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {  
					expectHeight = 1200;  
					expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;  
				}  
				var canvas = document.createElement("canvas");  
				var ctx = canvas.getContext("2d");  
				canvas.width = expectWidth;  
				canvas.height = expectHeight;  
				ctx.drawImage(this, 0, 0, expectWidth, expectHeight);  
				var base64 = null;  
  
				//若是方向角不爲1
				if(Orientation != "" && Orientation != 1){
					console.log('旋轉處理');  
					switch(Orientation){  
						case 6://須要順時針（向左）90度旋轉  
							console.log('須要順時針（向左）90度旋轉');  
							rotateImg(this,'left',canvas);  
							break;  
						case 8://須要逆時針（向右）90度旋轉  
							console.log('須要順時針（向右）90度旋轉');  
							rotateImg(this,'right',canvas);  
							break;  
						case 3://須要180度旋轉  
							console.log('須要180度旋轉');  
							rotateImg(this,'right',canvas);
							rotateImg(this,'right',canvas);
							break;  
					}
				}
				base64 = canvas.toDataURL("image/jpeg", 0.8);
				$("#myImage").attr("src", base64);
				console.log("上傳完成,請稍後..."); 
			};
		};  
		oReader.readAsDataURL(file);
	}
}

//對圖片旋轉處理 
function rotateImg(img, direction,canvas) { 
	//最小與最大旋轉方向，圖片旋轉4次後回到原方向    
	var min_step = 0;    
	var max_step = 3;       
	if (img == null)return;    
	var height = img.height;    
	var width = img.width;    
	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);    
	}
	//旋轉角度以弧度值爲參數    
	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;    
	}
}
</script>