最近在做一個H5姑隅，需要實現的功能是，手機拍照獲得一張照片倔撞，把照片通過FormData對象發(fā)送到后臺讲仰，返回新的圖片。在這個過程中遇到了一個坑痪蝇，就是iphone蘋果手機拍照之后上傳鄙陡，得到的照片旋轉了90度。
具體原因無需深究躏啰，通過一番google后找到解決辦法趁矾！
以下代碼是獲取手機拍照的方向的代碼：
// 該函數返回照片方向的代碼
function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
reader.readAsArrayBuffer(file);
}
用法：
var input = document.getElementById('input');
input.onchange = function(e) {
getOrientation(input.files[0], function(orientation) {
// code here!
});
}
那么，如何通過方向代碼來知道圖片是怎么旋轉的呢给僵？下面這張圖就是答案：
image.png
例如毫捣，返回的代碼是3详拙，我們得到的圖片是順時針旋轉了180度之后的圖片，所以我們需要對這張圖片逆時針旋轉180度即可得到原圖蔓同。
另外饶辙，返回-2代碼代表圖片不是jpg格式，返回-1代表未定義斑粱。
