问题
在移动端拍照并上传，在某些ios上会进行以西旋转，获取的图片源码，也是旋转过的，导致获取图片后，绘制图片出现问题。
要求
现要求全部统一图片为 树立形式。
原理：
1.在获取源码之前，要判断一下 是否为ios手机
2.旋转图片，旋转角度为多少
3.将图片重回绘制为正常树立图片
4.获取源码上传
插件：
exif-js
介绍：http://code.ciaoca.com/javascript/exif-js/
1.判断是ios还是安卓
//判断手机类型安卓/ios
function isAndroid_ios() {
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
return isAndroid == true ? true : false;
}
2.获取拍摄得照片是否旋转，角度为多少
//旋转图片操作 function rotateImage(image) { var width = image.width; var height = image.height; var canvas = document.createElement("canvas") var ctx = canvas.getContext(‘2d‘); var newImage = new Image(); EXIF.getData(image, function () { var orientation = EXIF.getTag(this, ‘Orientation‘); switch (orientation) { //正常状态 case 1: console.log(‘旋转0°‘); break; //旋转90度 case 6: console.log(‘旋转90°‘); canvas.height = width; canvas.width = height; ctx.rotate(Math.PI / 2); ctx.translate(0, -height); ctx.drawImage(image, 0, 0); imageDate = canvas.toDataURL(‘Image/jpeg‘, 1) newImage.src = imageDate; break; //旋转180° case 3: console.log(‘旋转180°‘); canvas.height = height; canvas.width = width; ctx.rotate(Math.PI); ctx.translate(-width, -height); ctx.drawImage(image, 0, 0); imageDate = canvas.toDataURL(‘Image/jpeg‘, 1) newImage.src = imageDate; break; //旋转270° case 8: console.log(‘旋转270°‘); canvas.height = width; canvas.width = height; ctx.rotate(-Math.PI / 2); ctx.translate(-height, 0); ctx.drawImage(image, 0, 0); imageDate = canvas.toDataURL(‘Image/jpeg‘, 1) newImage.src = imageDate; break; //undefined时不旋转 case undefined: console.log(‘undefined 不旋转‘); break; } }); return newImage; }
完整代码
//判断手机类型安卓/ios function isAndroid_ios() { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isAndroid == true ? true : false; } //获取 处理图片 $("#file").change(function (e) { var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { // console.log(this.result); // $(‘.person-img‘).attr(‘src‘, this.result); var result = this.result; $(".dialog").show(); var img = new Image(); img.src = result; img.onload = function () { if (!isAndroid_ios()) { //如果是旋转得图片，将图片重新赋值 img = rotateImage(img); } //处理 上传图片 upload(img) } } }); //旋转图片操作 function rotateImage(image) { //console.log(‘rotateImage‘); var width = image.width; var height = image.height; var canvas = document.createElement("canvas") var ctx = canvas.getContext(‘2d‘); var newImage = new Image(); EXIF.getData(image, function () { var orientation = EXIF.getTag(this, ‘Orientation‘); alert(orientation) switch (orientation) { //正常状态 case 1: console.log(‘旋转0°‘); break; //旋转90度 case 6: console.log(‘旋转90°‘); canvas.height = width; canvas.width = height; ctx.rotate(Math.PI / 2); ctx.translate(0, -height); ctx.drawImage(image, 0, 0); imageDate = canvas.toDataURL(‘Image/jpeg‘, 1) newImage.src = imageDate; break; //旋转180° case 3: console.log(‘旋转180°‘); canvas.height = height; canvas.width = width; ctx.rotate(Math.PI); ctx.translate(-width, -height); ctx.drawImage(image, 0, 0); imageDate = canvas.toDataURL(‘Image/jpeg‘, 1) newImage.src = imageDate; break; //旋转270° case 8: console.log(‘旋转270°‘); canvas.height = width; canvas.width = height; ctx.rotate(-Math.PI / 2); ctx.translate(-height, 0); ctx.drawImage(image, 0, 0); imageDate = canvas.toDataURL(‘Image/jpeg‘, 1) newImage.src = imageDate; break; //undefined时不旋转 case undefined: console.log(‘undefined 不旋转‘); break; } }); return newImage; }