踩坑记录：uni-app上传图片后显示方向不对的问题

荷塘白鹭
3,885 阅读3分钟

一早便有同时反馈，APP上传图片被翻转，显示方向与实际方向不符

01.png

第一反应就是，压缩图片上传，把图片的exif扩展信息丢失了，导致找不到exif中的Orientation参数

可交换图像文件格式（英语：Exchangeable image file format，官方简称Exif），是专门为数码相机的照片设定的，可以记录数码照片的属性信息和拍摄数据。

因为拍照过程中，不一定都是正着拍，也可以横着拍、竖着拍，然后拍照设备会将方向orientation记录在图片的exif扩展信息中，进行展示的时候，如果程序没有自动处理，则需要对根据方向进行处理，才能得到正确的展示效果

即向同事要来其中一张原图进行复现排查

查看图片扩展信息，这里推荐可以使用图虫EXIF查看器，上传原图，得到下图信息：

02.png

可见，原图确实存在方向参数，为旋转90度，即向右，right

开始调试，进行不压缩上传，但显示结果依然被旋转，显示效果不对

03.png

使用阿里云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，

04.png

发现，此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打开

上传，展示：

05.png

显示一切正常，再使用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信息未被丢失

完结，撒花，回复同事

06.png

踩坑总结

  1. uni.chooseImage()api默认会进行图片压缩，且会丢失图片exif扩展信息
  2. uni.chooseImage()未设置sizeType参数，文档说默认original原图，compressed压缩图两者都有，但其实只有压缩图
  3. 使用plus.zip.compressImage进行图片压缩，不会丢失exif扩展信息，app使用很完美
  4. 如果需要原图，需指定sizeType为['original']
avatar
文章
阅读
粉丝