通过exif.js简单处理手机照片拍摄图片旋转问题

在移动端拍照获取图片后，然后使用canvas压缩图片，有时我们会发现输出的图片是旋转过的。

其实当我们旋转手机拍照的时候，就会产生一个角度问题，生成的图片都会有EXIF meta data。然后我们可以通过一个js插件[exif-js]来读取图片的EXIF meta data中的角度数值，再通过canvas对图片进行旋转处理，这样我们就可以输出正常角度的图片了。

具体的EXIF meta data可以参考如下：http://www.impulseadventure.com/photo/exif-orientation.html

下面就简单的介绍一下实现步骤，具体的代码参考这里：传送门

使用input file获取本地的图片

---

获取本地图片我们使用简单的input file标签，然后在onchange事件里获取图片的相关信息

<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);"/>

通过input file获取到图片file对象，然后使用FileReader对象获取到内容数据。

function selectFileImage (file){
   
	var imgFile = file.files[0];
	var oReader = new FileReader();
	
	oReader.onload = function (e) {
   
		console.log('图片信息', e.target.result);
	}
	
	oReader.readAsDataURL(imgFile);
}

使用exif-js获取到图片的旋转角度

---

这个就比较简单了，简单调用下接口就可以实现

EXIF.getData(imgFile, function (