抖音小程序安卓摄像头和ios前置摄像头不一致得解决方法

目前安卓测试正常,需要把抖音拍的照片用canvas反转过来

直接上代码

• html

<camera  device-position="front" flash="off" onError="error" style="width: 320px;height:190px;" frame-size="large" canvas-id="camera-canvas" >
    </camera>
<!--创建一个 canvas 用来反转头像,canvas不能隐藏,不然会报错误-->
<canvas canvas-id="result-canvas" style="position:fixed;left:100%;height: 190px;width: 320px;" ></canvas>
  <button bindtap="takePhoto" style="border-radius: 50rpx;margin: 40rpx;">拍照  </button>

• css

启动的时候获取系统信息,记得data里添加一个isapple变量

onLoad(options) {
    tt.getSystemInfo({
      success: (res) => {
        console.log(res)
        if( res.platform=="ios"){
          this.setData({isapple:true})
        }else{
          this.setData({isapple:false})
        }
      },
      fail: (res) => {
      },
    });
  },

 takePhoto() {
    var that = this
    const ctx1 = tt.createCameraContext()

    ctx1.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res)
        if (that.data.isapple){
          let tempFilePath = res.tempImagePath
          const width = 320
          const height = 190
          const ctx = tt.createCanvasContext("result-canvas");
          ctx.clearRect(0, 0, width, height);
          ctx.drawImage(tempFilePath, 0, 0, width, height);
          // 对图像进行水平翻转
          ctx.scale(-1, 1);
          ctx.drawImage(tempFilePath, -width, 0, width, height);
          // 保存处理后的图像
          ctx.draw(false, () => {
            tt.canvasToTempFilePath({
              canvasId: 'result-canvas',
              success: (res) => {
                console.log(res)
                tt.navigateTo({
                  url:'xxxx'
                })
                // this.setData({src:res.tempFilePath})
              },
              fail:(res)=>{
                console.log("error",res)
              }
            });
          })

        }else {
          //安卓直接跳转
          tt.navigateTo({
            url:'xxxx'
          })
        }
       
      }
    })
  },