一早便有同时反馈,APP上传图片被翻转,显示方向与实际方向不符
第一反应就是,压缩图片上传,把图片的exif扩展信息丢失了,导致找不到exif中的Orientation参数
即向同事要来其中一张原图进行复现排查
查看图片扩展信息
可见,原图确实存在方向参数,为旋转90度
开始调试,进行不压缩上传,但显示结果依然被旋转,显示效果不对
使用阿里云ossx-oss-process=image/info
进行查看图片信息查看(api链接),返回结果:
{
"FileSize": { "value": "292585" },
"Format": { "value": "jpg" },
"ImageHeight": { "value": "1080" },
"ImageWidth": { "value": "1438" },
"ResolutionUnit": { "value": "1" },
"XResolution": { "value": "1/1" },
"YResolution": { "value": "1/1" }
}
复制代码
可见方向信息被丢失了,这时就有一个很大的疑问,为什么进行原图上传,但扩展信息已经丢失?
于是开始debugger
调试,使用uni.getImageInfo()
api进行图片信息获取,发现图片orientation
为up
,与图片实际方向不符合
{
path: 'file:///storage/emulated/0/Android/data/uni.UNIA98EF91/apps/__UNI__9613C89/doc/uniapp_temp/compressed/1637639926758_微信图片_20211123093640.jpg',
width: 1438,
height: 1080,
orientation: 'up',
type: 'jpeg',
errMsg: 'getImageInfo:ok'
}
复制代码
可见不是后续进行图片压缩产生的问题,是获取到图片时便已经丢失信息
徂从图片获取开始排查,在uni-app中,选择图片是使用uni.chooseImage()
api,
发现,此api默认有sizeType
参数,可选original
原图,compressed
压缩图,默认二者都有,但通过log打印发现,只会返回压缩后的图片,
{
errMsg: 'chooseImage:ok',
tempFilePaths: [
'file:///storage/emulated/0/Android/data/uni.UNIA98EF91/apps/__UNI__9613C89/doc/uniapp_temp/compressed/1637650175247_微信图片_20211123093640.jpg'
],
tempFiles: [
{
path: 'file:///storage/emulated/0/Android/data/uni.UNIA98EF91/apps/__UNI__9613C89/doc/uniapp_temp/compressed/1637650175247_微信图片_20211123093640.jpg',
size: 292585
}
]
}
复制代码
tempFilePaths[0]
和tempFiles[0].path
是一样的,二者无异,均是被压缩后的图片路径
徂将sizeType
设置为['original']
再通过uni.getImageInfo()
进行图片信息获取,发现orientation
方向为right
,与原图一致,为正常
{
path: 'file:///storage/emulated/0/$MuMu共享文件夹/微信图片_20211123093640.jpg',
width: 4624,
height: 3472,
orientation: 'right',
type: 'jpeg',
errMsg: 'getImageInfo:ok'
}
复制代码
再将后续图片压缩操作plus.zip.compressImage
打开
上传,展示:
显示一切正常,再使用x-oss-process=image/info
获取图片信息
{
ApertureValue: { value: '184/100' },
ExifTag: { value: '154' },
ExposureTime: { value: '700/10000' },
FNumber: { value: '18900/10000' },
FileSize: { value: '430517' },
Make: { value: 'Xiaomi' },
Model: { value: 'Redmi Note 8 Pro' },
Orientation: { value: '6' },
PixelXDimension: { value: '4624' },
PixelYDimension: { value: '3472' }
}
复制代码
图片扩展信息一应俱全(部分敏感参数,如gps定位信息已删除),Orientation
信息未被丢失
完结,撒花,回复同事
踩坑总结
uni.chooseImage()
api默认会进行图片压缩,且会丢失图片exif扩展信息uni.chooseImage()
未设置sizeType
参数,文档说默认original
原图,compressed
压缩图两者都有,但其实只有压缩图- 使用
plus.zip.compressImage
进行图片压缩,不会丢失exif扩展信息,app使用很完美 - 如果需要原图,需指定
sizeType
为['original']