移动端-ios 上传图片-图片被横屏旋转的问题

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版本之后的已经不需要做旋转处理。

猜你喜欢

转载自blog.csdn.net/gua222/article/details/106491246