解决上传图片自动旋转问题
苹果手机和部分安卓手机上传图片时会发生旋转，解决问题的思路是：先获取旋转角度，再对图片旋转进行修正
1、获取旋转角度
方式一、exif可以获取图片的信息可利用exif获取旋转角度，地址：/javascript/exif-js/此方式会有偶尔获取不到图片信息的bug，
EXIF.getData(document.getElementById('imgElement'), function(){EXIF.getAllTags(this);Orientation=EXIF.getTag(this, 'Orientation');//图像的旋转角度参数});
方式二、此方式暂时未发现有审么bug
getOrientation = function(file, callback) {var reader = new window.FileReader();reader.onload = function(e) {var view = new window.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);}
使用getOrientation
getOrientation(file, function(Orientation) {Orientation//此为旋转角度参数})
2、旋转修正
如果使用了megapix-image.js插件对图片进行压缩了，即可直接使用插件的旋转，也可使用其它方式对图片旋转
function compressImg(imgData, Orientation, onCompress) {if (!imgData) return;var pictype = imgData.match(/image\/\w+/);onCompress = onCompress || function() {};var canvas = document.createElement('canvas');var img = new Image();img.onload = function() {var ctx = canvas.getContext("2d");var mpImg = new MegaPixImage(img);mpImg.render(canvas, {maxWidth: 300,maxHeight: 400,quality: 1,orientation: Orientation//旋转角度参数});onCompress(canvas.toDataURL(pictype[0])); };img.src = imgData;}
