小程序自定义的拍照组件横屏拍照改变方向解决方案

自定义的拍照组件横屏拍照改变方向

本人最近在做一个涉及到拍照的小程序，由于微信原生的拍照组件不能个性化定制，所以就自己改装了一个拍照组件

但是发现，正常竖向拍照的时候可以用，

但是横向拍照，所得的结果还是横向的，类似于截屏的效果，所以就想拍照的时候获取一下手机的方向，然后根据方向对所拍的照片进行旋转处理，以便达到横竖拍照，结果正常的效果。

话不多说以下就是利用canvas处理拍照的结果的解决功能代码：

<canvas canvas-id="my-canvas" 
    style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;position:absolute;top:-2000%;">
    </canvas>

拍照的JS部分

    ctx.takePhoto({
        quality: "high",
        success: async (restp) => {
          // console.log(restp)
          // wx.getImageInfo({
          //   src: res.tempImagePath,
          //   success (res) {
          //     console.log("图片信息")
          //     console.log(res)
             
          //   }
          // })
          //拍照时候判断手机是否的方向横向还是竖向，使用异步函数，防止异步问题
          await new Promise(function (resolve, reject) {
            // 开启监听设备方向
          wx.startDeviceMotionListening({
            success:function(e){
              console.log("获取手机方向")
              // 监听设备方向变化事件
              wx.onDeviceMotionChange(function(resodm){
                console.log(resodm)
                // Y 轴转动的夹角（gamma）大于40或者小于-40时认为为横屏拍摄
                if (resodm.gamma < -40 || resodm.gamma > 40){
                  console.log("横屏")
                  //取消监听设备方向变化事件
                  wx.offDeviceMotionChange()
                  //通过刚才拍摄图片的url获取拍摄图片的信息，宽度，高度等
                  wx.getImageInfo({
                  src: restp.tempImagePath,
                  success (resgi) {
                    console.log("图片信息")
                    console.log(resgi)
                    // 计算宽高比例
                    let rate = resgi.width / resgi.height 
                    //将高度（也就是旋转后的宽度）固定为730（因为小程序宽度为750rpx）
                    let height = 730 
                    //通过比例获取旋转后的宽度
                    let width =height* rate
                    //创建 canvas 的绘图上下文 CanvasContext 对象
                    let canvasContext = wx.createCanvasContext('my-canvas')
                    //存放旋转后的图片的画布的宽高
                    that.setData({
                      canvasWidth:height,
                      canvasHeight:width,
                      orientation:1,
                      camera: false,
                    })
                    
                    canvasContext.translate(height / 2, width / 2)
                    if(resodm.gamma < -40){
                      //开始旋转操作，gamma小于-40顺时针旋转90度
                      canvasContext.rotate(90 * Math.PI / 180)
                    }else{
                      //开始旋转操作，gamma小于40逆时针旋转90度
                      canvasContext.rotate(-90 * Math.PI / 180)
                    }
                   
                    canvasContext.drawImage(restp.tempImagePath, -width / 2, -height / 2, width, height)
                    console.log(canvasContext)
                    canvasContext.draw(true,async() => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
                      await new Promise(function(resolve,reject){
                        wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
                          canvasId: 'my-canvas',
                          success(res) {
                            console.log( "wx.canvasToTempFilePath")
                            console.log( res)
                            let filePath = res.tempFilePath
                            that.setData({
                              src: filePath,
                              camera: false,
  
                            })
                            resolve()
                          }
                        }, this)
                      })
                      
                    })
                    resolve()
                  }
                })
      
                }else{
                console.log("竖屏")
                resolve()
                  wx.offDeviceMotionChange()
                  that.setData({
                    src: restp.tempImagePath,
                    camera: false,
                  })
                }
              })
            },
            fail:function(e){
              //关闭面板
            }
          })
          })
          
          wx.stopDeviceMotionListening({
            success: (res) => {
              console.log("关闭监控")
            },
          })
          console.log("拍照成功")

希望对大家有所帮助。