问题
在移动端拍照并上传，在某些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;
}
View Code
完整代码
//判断手机类型安卓/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;
}
View Code
