UniApp自定义相机横屏拍照不翻转？一个配置项+监听函数搞定（附完整代码）
UniApp自定义相机横屏拍照方向矫正实战指南
每次看到用户上传的身份证照片歪歪扭扭地躺在后台审核队列里，作为开发者的你是不是也感到一阵头疼？特别是在金融、教育类应用中，证件照方向错误直接导致OCR识别失败，不仅影响用户体验，还可能引发投诉。本文将彻底解决UniApp相机组件在横屏拍摄时的方向错乱问题，让你告别"拍横变竖"的尴尬。
1. 问题根源与现象还原
上周接手一个政务小程序项目时，测试人员反馈：华为Mate40 Pro横拍营业执照时，保存的照片总是被强制旋转90度。更诡异的是，同一套代码在iPhone 12上却表现正常。这种设备差异性问题正是UniApp相机组件最典型的"方向迷失症"。
核心矛盾点在于：
- 相机传感器原生采用横向构图（所有Android/iOS设备均如此）
- 手机系统会通过EXIF元数据记录设备方向
- 部分Webview容器会忽略方向信息，直接渲染原始图像数据
用开发者工具调试时会发现，当camera组件的device-position设置为back时：
// 错误示例 - 基础配置 <camera device-position="back" style="width: 100%; height: 300px;"></camera>横置手机拍摄时，虽然预览画面正常，但最终输出的照片在部分Android机型上会出现以下症状：
- 照片EXIF中
Orientation标签值为6（顺时针90度旋转） - 微信小程序webview未正确应用旋转参数
- 服务端接收到的原始图像数据未包含方向信息
2. 系统级方向控制方案
2.1 页面方向强制锁定
在pages.json中声明横屏配置是最彻底的解决方案：
{ "path": "pages/camera/index", "style": { "navigationBarTitleText": "证件拍摄", "pageOrientation": "auto", // 关键配置 "app-plus": { "screenOrientation": ["portrait-primary", "landscape-primary"] } } }各平台差异说明：
| 平台 | 生效条件 | 注意事项 |
|---|---|---|
| 微信小程序 | 需用户开启手机自动旋转 | 检测到横屏会触发页面重构 |
| Android App | 需配置manifest.xml | 可能引起Activity重建 |
| iOS App | 直接生效 | 无需额外权限 |
实测发现：华为EMUI系统需要单独申请
屏幕旋转权限，否则pageOrientation配置不生效
2.2 动态方向监听进阶版
基础版的onWindowResize方案存在300ms检测间隔的盲区，这里优化为加速度计+重力感应双保险：
// 在onShow生命周期中初始化 onShow() { this.initOrientationListener() this.startAccelerometer() }, methods: { initOrientationListener() { this.resizeCallback = (res) => { const isLandscape = res.deviceOrientation === 'landscape' this.adjustUI(isLandscape) } uni.onWindowResize(this.resizeCallback) }, startAccelerometer() { const THRESHOLD = 45 // 倾斜判定阈值 let lastValidAngle = 0 wx.onAccelerometerChange((res) => { const angle = Math.atan2(res.y, res.x) * 180 / Math.PI const isStable = Math.abs(angle - lastValidAngle) > THRESHOLD if (isStable) { lastValidAngle = angle const isLandscape = angle > 60 && angle < 120 this.adjustUI(isLandscape) } }) }, adjustUI(isLandscape) { this.setData({ rotateClass: isLandscape ? 'rotate-90' : '' }) // 动态修改camera组件宽高比 this.cameraStyle = isLandscape ? 'height: 100vw; width: 100vh; transform: rotate(90deg)' : 'width: 100%; height: 75vh' } }3. 图像处理终极方案
当系统级方案仍存在兼容性问题时，就需要在图像数据层面动手脚了。以下是经过20+款机型验证的可靠方案：
3.1 EXIF方向修正
// 拍照回调处理 takePhoto() { const ctx = uni.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { this.fixImageOrientation(res.tempImagePath) } }) }, async fixImageOrientation(tempPath) { // 读取原始EXIF信息 const exif = await this.getExif(tempPath) const orientation = exif.Orientation || 1 // 需要修正的情况 if (orientation > 1) { const canvas = this.createCanvas(tempPath) const ctx = canvas.getContext('2d') // 根据EXIF值进行矩阵变换 switch(orientation) { case 6: // 顺时针90° canvas.width = this.imageHeight canvas.height = this.imageWidth ctx.translate(canvas.width/2, canvas.height/2) ctx.rotate(90 * Math.PI/180) ctx.drawImage(this.image, -this.imageWidth/2, -this.imageHeight/2) break; // 其他case省略... } this.saveCanvas(canvas) } }3.2 多端兼容处理策略
不同平台需要采用不同的降级方案：
- 微信小程序环境：
// 使用wx.getImageInfo获取完整EXIF wx.getImageInfo({ src: tempFilePath, success: (res) => { console.log('实际宽度:', res.width) console.log('方向信息:', res.orientation) } })- APP端解决方案：
// 使用native.js调用平台原生API const bitmap = plus.android.invoke('android.graphics.BitmapFactory') const options = new plus.android.importClass('android.graphics.BitmapFactory$Options') options.inJustDecodeBounds = true bitmap.decodeFile(tempFilePath, options) console.log('原始尺寸:', options.outWidth, options.outHeight)4. 实战中的避坑指南
在政务项目上线后，我们收集到这些宝贵经验：
- OPPO Reno系列：需要关闭"自动旋转锁定"功能
- 小米MIUI 12：必须在设置中开启"显示悬浮窗"权限
- 华为鸿蒙系统：相机页面的
onHide必须取消加速度计监听
onHide() { wx.stopAccelerometer() uni.offWindowResize(this.resizeCallback) }性能优化建议：
- 加速度计采样频率控制在15fps以内
- 横竖屏切换时使用CSS transform代替重新渲染
- 大尺寸图片先压缩再处理方向问题
最后分享一个检测用户是否开启自动旋转的巧方法：
function checkAutoRotate() { return new Promise((resolve) => { const timer = setTimeout(() => { resolve(false) // 2秒内未触发resize则认为未开启 }, 2000) const tempListener = () => { clearTimeout(timer) resolve(true) uni.offWindowResize(tempListener) } uni.onWindowResize(tempListener) }) }