微信小程序：上传的图片显示旋转问题

问题？

开发中遇到微信小程序在上传照片后，会有一定概率旋转，查阅了资料之后，发现是和图片中携带的exif信息中的orientation这个参数有关。
小程序的页面实用webview渲染的，webview的图片渲染不会读取图片的exif信息，这个浏览器内核没支持，而小程序的预览图片wx.previewImage可以是因为客户端解析了exif信息。

解决办法

由于个别图片拍摄时候自带旋转信息，经过个人测试跟图片大小和后缀没关系，部分机型会在选择相册时候进行了上面那个旋转（图片带有多少度旋转就旋转多少度），上传时候服务端可以查看图片的 exif 信息便知晓，由于不是每张图片都有问题，个人建议运营发布图片时检查图片是否带有旋转度，如果有进行二次编辑即可，如果是用户上传建议服务端修改 exif 或服务端返回 exif 信息由前端判断去处理旋转。
图片EXIF信息查看器：https://exif.tuchong.com/

前端修改的话，小程序中通过getImageInfo这个接口中可以获得orientation 的信息，所以，我们只要知道旋转的角度，再旋转回来即可。

• 小程序关于 orientation 参数
  
• 示例代码

wx.getImageInfo({
 src: 'images/test.jpg',//图片的路径，支持网络路径、本地路径、代码包路径
 success (res) {
   console.log(res.orientation)
 }
})

• 小程序图片旋转关键代码

<canvas canvas-id="canvas" style="width:{{imageWidth}}px;height:{{imageHeight}}px;position:absolute;top:200%" ></canvas>

wx.getImageInfo({
 src: 'images/test.jpg',//图片的路径，支持网络路径、本地路径、代码包路径
 success:(res)=>{
   let canvasContext = wx.createCanvasContext('canvas')
   //获得exif中的orientation信息   
   以旋转180度为例
   if(res.orientation == "down"){
         var width = res.width;
         var height = res.heigh;
         this.setData({
           imageWidth: width,
           imageHeight: height,
         })
         canvasContext.translate(width / 2, height / 2)
         canvasContext.rotate(180 * Math.PI / 180)
         canvasContext.drawImage(tempFilePaths[0], -width / 2, -height / 2, width, height);
         canvasContext.draw()
         this.drawImage()
 }
})

//canvas绘制

drawImage:function(path) {
    var that = this;
    setTimeout(()=>{
      // 将生成的canvas图片，转为真实图片
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        canvasId: 'canvas',
        success(res) {
          let shareImg = res.tempFilePath;
          that.setData({
            chosenImage: res.tempFilePath,
          })
        },
        fail: function (res) {
        }
      })
    }, 2000)
  }

注：有问题可以留言交流。