剪不断理还乱
剪不断理还乱
  • 发布:2025-11-19 12:05
  • 更新:2025-11-19 12:05
  • 阅读:17

【报Bug】compressImage getImageInfo 存在方向错误 和 旋转异常 压缩无效的 问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: Alpha

HBuilderX版本号: 4.86

手机系统: 全部

手机厂商: 华为

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iPhone 8 16 iPhone 15 18.6 nova12 鸿蒙next oppo

示例代码:
<template>  
    <view style="padding-top: 200rpx;">  
        <button @click="test">选择图片</button>  
        <view>  
            <text>{{imageInfo}}</text>  
        </view>  
        <image v-if="imageUrl" :src="imageUrl" mode="aspectFill" />  
    </view>  
</template>  

<script setup>  
    import {ref} from 'vue'  
/**  
 * 照片有个叫 exif 的部分 的 orientation 存储了图片的方向.  
 * 如果拍的是 字母 F 那么 orientation 就表示数据的实际存储, 查看时需要旋转一下.  
 *   1        2       3      4         5            6           7          8  
 *  
 * 888888  888888      88  88      8888888888  88                  88  8888888888  
 * 88          88      88  88      88  88      88  88          88  88      88  88  
 * 8888      8888    8888  8888    88          8888888888  8888888888          88  
 * 88          88      88  88  
 * 88          88  888888  888888  
 *  
 * iPhone 的照片我们程序都能拿到方向.  
 * 安卓大部分手机无论是那个方向拍照的, 我们程序拿到的都是默认方向 1, 并且图片已经旋  
 * 转正确了, 也可能有和iphone一样能拿到方向的情况.  
 *  
 * 压缩 会将 orientation 设置为 1, 所以压缩时需要根据方向设置 rotate 把图片转正.  
 *  
 * 测试  
 * iPhone 8 的照片 和 iPhone 15 / 16 / 17 的照片 orientation 都为 6.  
 * 压缩时 rotate 传了 90 (顺时针旋转 90 度)  
 * iPhone 15 / 16 / 17 的照片压缩后方向正确.  
 * iPhone 8 的照片压缩后旋转了 180 度.  
 *  
 * 不使用压缩, 直接上传.  
 * iPhone 15 / 16 / 17 的照片太大, 无法上传.  
 * iPhone 8 的照片在商品详情上传, 会被删除 exif 数据, 在单据附件处上传, 正常.  
 *   
 * 说明 uni 和 plus 的 compressImage 可能存在问题.  
 *  
 */  

const imageUrl = ref('');  
const imageInfo = ref('');  

/**  
 * 测试 compressImage 是否存在问题.  
 */  
function test() {  
    uni.chooseImage({  
        count: 1,  
        sizeType: ['original', 'compressed'],  
        sourceType: ['album', 'camera'],  
        success: (chooseImageRes) => {  
            uni.getImageInfo({  
                src: chooseImageRes.tempFilePaths[0],  
                success: (getImageInfoRes) => {  
                    imageInfo.value = `原图:${getImageInfoRes.width}x${getImageInfoRes.height} 方向:${getImageInfoRes.orientation}`  

                    let rotate = 0;  
                    switch (getImageInfoRes.orientation) {  
                        case 'up':  
                        case 'up-mirrored':  
                            rotate = 0;  
                            break;  
                        case 'down':   
                        case 'down-mirrored':   
                            rotate = 180;  
                            break;  
                        case 'left':  
                        case 'left-mirrored':   
                            rotate = 270;  
                            break;  
                        case 'right':  
                        case 'right-mirrored':  
                            rotate = 90;  
                            break;  
                    }  
                    uni.compressImage({  
                        src: chooseImageRes.tempFilePaths[0],  
                        rotate,  
                        success: (compressImageRes) => {  
                            imageUrl.value = compressImageRes.tempFilePath;  
                            uni.getImageInfo({  
                                src: compressImageRes.tempFilePath,  
                                success: (getImageInfoRes) => {  
                                    imageInfo.value += `, 压缩后图:${getImageInfoRes.width}x${getImageInfoRes.height} 方向:${getImageInfoRes.orientation}`  
                                }  
                            })  
                        }  
                    })  
                },  
            })  
        }  
    })  
}  
</script>

操作步骤:

选择图片即可见效果

预期结果:

方向正确, 压缩正确

实际结果:

方向异常, 压缩异常

bug描述:

两种图: iphone 8 (16系统) 拍照的图 8.jpg, iPhone 15(系统 18) 拍照的图 15 plus.jpg, 均通过 uni.chooseImage 原图获取后上传到pc 拿到的图片; [EXIF] 的 Orientation 均为 Rotate 90 CW; 也就是 right.

安卓和ios压缩时 如果指定旋转90度, 则8.jpg 方向错误, 如果不旋转, 则 15 plus.jpg 方向错误;
安卓和ios 的 plus 的 compressImage 也存在该问题.

鸿蒙: getImageInfo 返回的 orientation 全部为 up; compressImage后任然返回原图 无压缩效果, 并且选择图片时无论是否勾选原图均返回原图.

附件为两张图片

2025-11-19 12:05 负责人:无 分享
已邀请:

要回复问题请先登录注册