解决uniapp自定义相机照片横屏拍摄竖屏显示的问题

最新推荐文章于 2025-03-05 15:14:39 发布

害群的码

最新推荐文章于 2025-03-05 15:14:39 发布

阅读量2.7k

点赞数

文章标签： uni-app 数码相机 javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_56149957/article/details/131263710

版权

问题描述：在使用uniapp或者是微信小程序的自定义相机组件（camera组件）发现横屏拍摄的照片最后会竖屏显示

原因：因为在使用自定义相机组件的页面可能是竖屏的，所以使用横屏拍摄时返回的照片就是竖屏的

解决方法：在进入自定义相机页面的时候将页面改为横屏，竖屏自由切换的状态

步骤：

1.在pages.json里面使用自定义相机的页面添加下面的代码

2.在自定义相机页面的onShow()生命周期里面添加以下代码

onShow(){
       //监测横屏竖屏必须配置在onShow()生命周期函数
       // 声明回调函数是为了控制取消监听，不取消也可以直接写在函数内部就好
       this.windowResizeCallback = (res) => {
       console.log('onWindowResize', res);
                           this.isfangxiang=res.deviceOrientation
       }
       uni.onWindowResize(this.windowResizeCallback);
       console.log(this.windowResizeCallback,'ssjjcj')
               // 0为竖屏，1为横屏
               let lastState = 0;
               let lastTime = Date.now();

               wx.startAccelerometer();

               wx.onAccelerometerChange((res) => {
               // console.log('onAccelerometerChange执行了')
               const now = Date.now();

               // 500ms检测一次 500ms实测可能会导致页面的onResize先执行了，
               if (now - lastTime < 300) {
               return;
               }
               lastTime = now;

               let nowState;

               // 57.3 = 180 / Math.PI
               const Roll = Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) *57.3;
               const Pitch = Math.atan2(res.y, res.z) * 57.3;

               // 横屏状态
               if (Roll > 50) {
               if ((Pitch > -180 && Pitch < -60) || (Pitch > 130)) {
               nowState = 1;
               }else {
               nowState = lastState;
               }

               }else if ((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {
               let absPitch = Math.abs(Pitch);

               // 如果手机平躺，保持原状态不变，40容错率
               if ((absPitch > 140 || absPitch < 40)) {
               nowState = lastState;
               }else if (Pitch < 0) {/*收集竖向正立的情况*/
               nowState = 0;
               }else {
               nowState = lastState;
               }
               }
               else {
               nowState = lastState;
               }

               // 状态变化时，触发
               if (nowState !== lastState) {
               lastState = nowState;
               if (nowState === 1) {
               var flag=false;
               var data = wx.onWindowResize(function(res){
               flag = true;
               })
               setTimeout(
               function () {
               if(flag == false){
               uni.showToast({
               icon:'none',
               duration:5000,
               title:'请先打开手机的自动旋转功能！'
               })
               }
               }, 2000);
               console.log('change:横屏');

               }else {
               console.log('change:竖屏');
               }
               }
               });

       }