uni-app H5平台下相机拍照图片方向旋转90度问题

uni-app H5平台下相机拍照图片方向旋转90度问题

开发环境 版本号 项目创建方式
Windows win10 1909 HBuilderX 
# bug描述：

## H5相机拍照
## 机型：Redmi k20Pro 尊享版
## 手机厂商：小米
## 操作系统：安卓

在H5调起 `<uni.chooseImage>` 接口使用相机拍照时，返回的图片会自动旋转90度。

### 示例代码：

```javascript
uni.chooseImage({  
    count:1,  
    sizeType:["original"],  
    sourceType:["camera"],  
    success:(res)=>{
        // 传入图片路径和对象键名  
        this.upImgToServic(res.tempFilePaths[0], key);  
    },  
    fail:()=>{
        uni.hideLoading();  
        Toast("用户取消拍照或，调用相机出错请检查相机权限","none");  
    }  
});

操作步骤：

  • 进入首页，点击底部导航栏<下单>进入后选择拍照下单，进入页面拍照

预期结果：

  • 拍照返回的图片方向与拍照时的方向一致

实际结果：

  • 拍照返回的图片方向被自动旋转的90度

更多关于uni-app H5平台下相机拍照图片方向旋转90度问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

经操作没有发现次问题，一张竖拍，一张横排

更多关于uni-app H5平台下相机拍照图片方向旋转90度问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我把录屏的压缩包放在评论区了，是红米K20Pro的机子，安卓版本10

这是拍照复现过程的录屏

之前就遇到过这样的问题，猜测原因是因为拍照的图片的像素太高了，抠jio的方式是，拍完照对照片进行压缩，在显示

嗯，谢谢大佬，一会去试试

这是一个常见的H5平台下拍照图片旋转问题，主要是由于手机相机传感器方向与浏览器EXIF信息处理不一致导致的。

解决方案：

  1. 使用EXIF.js库读取图片的Orientation信息：
import EXIF from 'exif-js'

function getOrientation(file) {
  return new Promise((resolve) => {
    EXIF.getData(file, function() {
      resolve(EXIF.getTag(this, 'Orientation') || 1)
    })
  })
}
  1. 修正图片方向：
function fixImageOrientation(img, orientation) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  
  // 根据orientation值进行旋转修正
  switch(orientation) {
    case 6: // 旋转90度
      canvas.width = img.height
      canvas.height = img.width
      ctx.rotate(Math.PI/2)
      ctx.drawImage(img, 0, -img.height, img.width, img.height)
      break
    // 其他情况处理...
    default:
      return img
  }
  return canvas.toDataURL('image/jpeg')
}
  1. 在chooseImage回调中处理：
uni.chooseImage({
  success: async (res) => {
    const file = res.tempFiles[0]
    const orientation = await getOrientation(file)
    const fixedImg = await fixImageOrientation(file, orientation)
    // 使用fixedImg
  }
})
回到顶部