前端解决图片旋转时遇到的问题记录

bug：

手机上传图片到服务器，有的电脑浏览器显示的图片会出现图片旋转问题。

思路一（错误）：

由于是在显示的时候发现的bug，所以，一开始，是在显示的时候进行的处理。

百度到了许多原因。然后找到了以下处理方案。

经过测试，发现原本 " orientation=6 " 能够正常显示的全部旋转了90°......

<!-- 这里采用cdn形式引入exif -->
<script src="https://cdn.jsdelivr.net/npm/exif-js" charset="utf-8"></script>

......

res.data.pictures.forEach(function (k, v) {
    var file ="image/"+ k.path;
    //处理图片旋转
    let img = new Image();
    try {
        img.src = file;
    } catch (error) {
        img.src = window.URL.createObjectURL(file);
    }
    //图片预加载
    img.onload = function() {
        //获取图片源数据
        EXIF.getData(img, function () {
            //获取图片orientation值
            let orientation = EXIF.getTag(this, "Orientation");
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            switch (orientation) {
                case 3: // 旋转180°
                    alert(3);
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.rotate((180 * Math.PI) / 180);
                    ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
                    break;
                case 6: // 旋转90°
                    alert(6);
                    canvas.width = img.height;
                    canvas.height = img.width;
                    ctx.rotate((90 * Math.PI) / 180);
                    ctx.drawImage(img, 0, -img.height, img.width, img.height);
                    break;
                case 8: // 旋转-90°
                    alert(8);
                    canvas.width = img.height;
                    canvas.height = img.width;
                    ctx.rotate((-90 * Math.PI) / 180);
                    ctx.drawImage(img, -img.width, 0, img.width, img.height);
                    break;
                default: // 没有源信息的图片和正常的图片是不需要旋转的
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.drawImage(img, 0, 0, img.width, img.height);
                    break;
            }
            file = canvas.toDataURL("image/png");
            $('#demo2').append('<img src="'+ file +'" class="layui-upload-img" height="150px">');
        });
    };
});

思路二（错误）：

继续百度，有人说，在后端进行处理，删除图片exif 信息，删除后用户上传是什么样的，展示就是什么样。

由于没有苹果设备，就在电脑上进行了下测试。

①：从服务器上把苹果上传的那张图片下载到本地。

②：下载jhead.exe，复制到 C:\Windows路径下。

③：cmd运行命令

jhead -de D:/A.jpg
删除D盘盘根目录下A.jpg文件的exif信息。
jhead -de D:/*.jpg
删除D盘根目录下所有jpg文件的exif信息。其中星号是通配符。

然后，本地的图片的方向就旋转了......

后端小萌新哭了......

思路三：

经过询问前端大佬，原来应该在手机上传图片的时候进行处理。

百度原因总结：

①：手机中默认横排才是正确的拍照姿势。部分设备因为不同的拍摄角度，图片旋转的角度不一样，上传后的方向也不一样。在浏览器中旋转角度被忽略了，导致图片是旋转的。借助exif-js获取图片的源信息，判断 Orientation， 然后旋转对应的角度。

②：因为手机系统版本的不同，有些需要前端对其调整图片方向；有些不需要前端对其调整图片方向，无论倒着拍，还是旋转拍，图片上传后的方向都是正确的。

③：因为浏览器内核的不同，有些需要进行旋转，有些不需要进行旋转。