小程序 页面横屏的时候调用takePhoto拍照的方法，横屏展示的时候图片会竖着展示，会自己旋转

        如上图我在横屏调用takePhoto的时候会自己旋转，这就成竖屏展示的了？？？竖屏展示你倒是展示全点啊，去微信开发社区问，这半天也不回一句话。。。（这是我提的问题链接）  https://developers.weixin.qq.com/community/develop/doc/000686b152c0e805694a398d951c00 

 求人不如求己还是自己试试吧，今天被我试出来了，下面说下解决方法

1.首先需要在wxml里面添加一个画布我们需要在画布上面操作这个图片  

 <canvas canvas-id="my-canvas" class="my-canvas" wx:if="{{isBackShow}}">

  样式的话 width: 100%; height: 100vh;

  样式可以动态设置图片的大小，我在横屏下动态设置的话图片显示的不全，所以就干脆100%了

2.调用拍照的方法Takephoto方法得到图片的URL然后去操作图片，代码看下面吧 

 const ctx = wx.createCameraContext()
      ctx.takePhoto({
        quality: 'normal',
        success: (res) => {
          let url = res.tempImagePath;
          wx.getImageInfo({
            src: url,
            success:res=>{
              let canvasContext = wx.createCanvasContext('my-canvas', this)
              // 下面按比例写死宽度高度是为了压缩图片提升上传速度，可按实际需求更改
              let rate = res.height / res.width 
              let width =res.width
              let height = res.height * rate
              switch (res.orientation) { // 根据orientation值处理图片
                case ("up"):
                  //不需要旋转
                  canvasContext.drawImage(url, 0, 0, width, height+100);
                case ("down"):
                  //不需要旋转
                  canvasContext.drawImage(url, 0, 0, width, height+100);
                  break;
                case ("left"):
                  // canvasContext.translate(height, width / 3)
                  // canvasContext.rotate(0 * Math.PI / 180)
                  canvasContext.drawImage(url, 0 , 0, width-200, height+100);
                  break;
                case ("right"):
                  // canvasContext.translate(height, width / 3)
                  // canvasContext.rotate(0 * Math.PI / 180)
                  canvasContext.drawImage(url, 0 , 0, width-200, height+100);
                  break;
              }
              canvasContext.draw(false, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
                wx.canvasToTempFilePath({ // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
                  canvasId: 'my-canvas',
                  success(res) {
                    let filePath = res.tempFilePath
                    //这里可以直接展示图片 

                  }
                }, this)// 在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件
              })
            }
          })
        }

  如果按照上面的代码还有问题的话可以调整下面的三个方法。

   // canvasContext.translate(height, width / 3)
   // canvasContext.rotate(0 * Math.PI / 180)
   canvasContext.drawImage(url, 0 , 0, width-200, height+100);