Skip to content

利用 exif.js 解决 ios 手机上传竖拍照片旋转 90 度问题

我的项目是Vue+Vant,今天在写上传头像的功能时发现,苹果手机上传的话照片会自动旋转 90 度,安卓和 PC 端则不会。花了一上午的时间解决了这个问题。

我们首先需要安装一个包:npm install exif-js --save

然后在项目中导入:import EXIF from "exif-js"

js
img.onload = () = >{
    // 处理图片在ios下自动旋转问题
    let imgStyle = 'rotate(0deg)'
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isiOS) {
        EXIF.getData(img,
        function() {
            EXIF.getAllTags(this);
            let Orientation = 1;
            Orientation = EXIF.getTag(this, 'Orientation');
            switch (Orientation) {
            case 6:
                //需要顺时针(向左)90度旋转
                imgStyle = 'rotate(-90deg)';
                break;
            case 8:
                //需要逆时针(向右)90度旋转
                imgStyle = 'rotate(90deg)';
                break;
            case 3:
                //需要180度旋转
                imgStyle = 'rotate(180deg)';
                break;
            }
        });
    }
}

赣ICP备2023003243号