javascript ios 拍照照片翻转解决方案详解编程语言

$('.scpicinput').change(function() { 
$('.jiazaicontainer').css('display', 'block'); 
var file = this.files[0]; 
if (file) { 
var rFilter = /^(image//jpeg|image//png)$/i; // 检查图片格式 
if (!rFilter.test(file.type)) { 
alert("请选择jpeg、png格式的图片"); 
return; 
} 
//获取照片方向角属性 
EXIF.getData(file, function() { 
EXIF.getAllTags(this); 
orientation = EXIF.getTag(this, 'Orientation'); 
alert(orientation); 
}); 
var reader = new FileReader(); 
reader.readAsDataURL(file); 
reader.onload = function(e) { 
var image = new Image(); 
image.src = e.target.result; 
image.onload = function() { 
var canvas = document.createElement("canvas"); 
canvas.width = this.naturalWidth; 
canvas.height = this.naturalHeight; 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight); 
if (orientation != "" && orientation != 1 && orientation != undefined) { 
var width = this.naturalWidth; 
var height = this.naturalHeight; 
// 1 上 左 
// 2 上 右 
// 3 下 右 
// 4 下 左 
// 5 左 上 
// 6 右 上 
// 7 右 下 
// 8 左 下 
switch (orientation) { 
case 6: //需要顺时针90度旋转 
canvas.width = height; 
canvas.height = width; 
ctx.rotate(90 * Math.PI / 180); 
ctx.drawImage(this, 0, -height); 
break; 
case 8: //需要逆时针90度旋转 
canvas.width = height; 
canvas.height = width; 
ctx.rotate(-90 * Math.PI / 180); 
ctx.drawImage(this, -width, 0); 
break; 
case 3: //需要180度旋转 
ctx.rotate(180 * Math.PI / 180); 
ctx.drawImage(this, -width, -height); 
break; 
} 
} 
zhaopianbase64 = canvas.toDataURL("image/jpg"); 
$('.replacepic').attr('src', zhaopianbase64) 
$('.jiazaicontainer').css('display', 'none'); 
}; 
}; 
} else { 
tanc('file不存在'); 
return false; 
} 
})