uni-app的H5项目利用EXIF解决部分手机图片上传旋转的问题

公司项目中总结的一点经验，给有遇到类似问题的小伙伴提供一下思路。水平浅，代码不规整的地方，望轻喷。
部分未解决问题（其他角度拍照无法翻转）
1.手机必须支持重力感应，不然Orientation值是不变的；
2.有部分手机（R11），拍照不含有Orientation值；

node安装 exif-js

npm install exif-js -S

默认浏览器不会对带 EXIF 信息的图片进行回正，之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。

增加判断浏览器是否支持带EXIF的图片自动回正

文件名 IsAutoRotateImg.js

// 判断浏览器是否支持对图片进行回正操作
// 一张 2x1 的 JPEG 图片, EXIF Orientation: 6
const testAutoOrientationImageURL =
    'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
    'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
    'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
    'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAEAAgMBEQACEQEDEQH/x' +
    'ABKAAEAAAAAAAAAAAAAAAAAAAALEAEAAAAAAAAAAAAAAAAAAAAAAQEAAAAAAAAAAAAAAAA' +
    'AAAAAEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwA/8H//2Q==';
let isImageAutomaticRotation;

export function detectImageAutomaticRotation() {
    return new Promise((resolve) => {
        if (isImageAutomaticRotation === undefined) {
            const img = new Image();

            img.onload = () => {
                // 如果图片变成 1x2，说明浏览器对图片进行了回正
                isImageAutomaticRotation = img.width === 1 && img.height === 2;
                resolve(isImageAutomaticRotation);
            };
            img.src = testAutoOrientationImageURL;
        } else {
            // console.log('isImageAutomaticRotation === undefined');
            resolve(isImageAutomaticRotation);
        }
    });
}

处理图片旋转，获取图片的Orientation，根据Orientation的值去旋转图片

import { EXIF } from "exif-js"
//引入判断浏览器是否支持带EXIF的图片自动回正
import { detectImageAutomaticRotation } from "@/common/IsAutoRotateImg.js"
//imgFile 为 文件类型
const _rotateImg = (imgFile) => {
    console.log(imgFile);
    return new Promise((resolve, reject) => {
        EXIF.getData(imgFile, function() {
            console.log('进入getdata')
            let exifTags = EXIF.getAllTags(this);
            let reader = new FileReader();
            reader.readAsDataURL(imgFile);
            reader.onload = e => {
                let imgData = e.target.result;
                // 判断浏览器是否支持对图片进行回正操作
                detectImageAutomaticRotation().then(res => {
                    //res为true时。浏览器支持对带 EXIF 信息的图片进行自动回正
                    if (res) {
                        return resolve(imgData)
                    }
                    //res为false时。执行js，对带 EXIF 信息的图片进行回正
                    // 8 表示 顺时针转了90
                    // 3 表示 转了 180
                    // 6 表示 逆时针转了90
                    if (
                        exifTags.Orientation == 8 ||
                        exifTags.Orientation == 3 ||
                        exifTags.Orientation == 6
                    ) {
                        //翻转
                        //获取原始图片大小
                        const img = new Image();
                        img.src = imgData;
                        img.onload = function() {
                            let cvs = document.createElement('canvas');
                            let ctx = cvs.getContext('2d');
                            //如果旋转90
                            if (
                                exifTags.Orientation == 8 ||
                                exifTags.Orientation == 6
                            ) {
                                cvs.width = img.height;
                                cvs.height = img.width;
                            } else {
                                cvs.width = img.width;
                                cvs.height = img.height;
                            }
                            if (exifTags.Orientation == 6) {
                                //原图逆时针转了90, 所以要顺时针旋转90
                                ctx.rotate(Math.PI / 180 * 90);
                                ctx.drawImage(
                                    img,
                                    0,
                                    0,
                                    img.width,
                                    img.height,
                                    0,
                                    -img.height,
                                    img.width,
                                    img.height
                                );
                            }
                            if (exifTags.Orientation == 3) {
                                //原图逆时针转了180, 所以顺时针旋转180
                                ctx.rotate(Math.PI / 180 * 180);
                                ctx.drawImage(
                                    img,
                                    0,
                                    0,
                                    img.width,
                                    img.height,
                                    -img.width,
                                    -img.height,
                                    img.width,
                                    img.height
                                );
                            }
                            if (exifTags.Orientation == 8) {
                                //原图顺时针旋转了90, 所以要你时针旋转90
                                ctx.rotate(Math.PI / 180 * -90);
                                ctx.drawImage(
                                    img,
                                    0,
                                    0,
                                    img.width,
                                    img.height,
                                    -img.width,
                                    0,
                                    img.width,
                                    img.height
                                );
                            }
                            resolve(cvs.toDataURL('image/jpeg'));
                        }
                    } else {
                        resolve(imgData);
                    }
                })
            }
        });
    });
}
export default _rotateImg

参考资料：http://www.zyiz.net/tech/detail-135910.html
https://www.cnblogs.com/jrg-Archer/p/11659910.html

最后编辑于：2020.06.28 17:48:27