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;
}
})

ios 拍照照片翻转解决方案