- 发布:2025-11-19 12:05
- 更新:2025-11-19 12:05
- 阅读:17
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: Alpha
HBuilderX版本号: 4.86
手机系统: 全部
手机厂商: 华为
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<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>
<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后任然返回原图 无压缩效果, 并且选择图片时无论是否勾选原图均返回原图.
附件为两张图片