1.获取图片是否带有旋转角度
let Orientation=1;
//去获取拍照时的信息,解决拍出来的照片旋转问题
Exif.getData(file, function () {
Orientation = Exif.getTag(this, "Orientation");
console.log("Orientation:"+Orientation);
});
2.根据这个orientation的值做处理
//修复ios上传图片的时候 被旋转的问题
let canvas = document.createElement("canvas");
if (Orientation !== "" && Orientation !== 1) {
switch (Orientation) {
case 6: //需要顺时针(向左)90度旋转
this.rotateImg(img, "left", canvas);
break;
case 8: //需要逆时针(向右)90度旋转
this.rotateImg(img, "right", canvas);
break;
case 3: //需要180度旋转
this.rotateImg(img, "right", canvas); //转两次
this.rotateImg(img, "right", canvas);
break;
}
}
// 旋转图片
rotateImg(img, direction, canvas) {
//最小与最大旋转方向,图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取,否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == "right") {
step++;
//旋转到原位置,即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
let degree = (step * 90 * Math.PI) / 180;
let ctx = canvas.getContext("2d");
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
},
//详细压缩图片、将图片调整为正常位置显示的代码不一一罗列了,网上很多差不多的例子
原本基本到这就结束了。
但是昨天在做新版本迭代测试的时候,用IOS13.4版本的手机上传照片时,又出现了图片横排显示的问题!!!
console一看,ios13.4上传的图片是正常的显示格式,即不需要做旋转九十度处理,但是图片的Orientation 值为6,在之前值为6的都是上传已横向显示需要再回转90的。随即在处理旋转之前又加了ios版本的判断,13.4之前的还用老办法,13.4版本之后的已经不需要做旋转处理。