小程序图片上传用upng转base64 图片旋转180度的问题 （ios）

最近业务需要：将图片转为base64格式。 
so~~~；百度n多资料最后写成，还是有一点小bug就是生成的图片不太清晰； 
文章最后还有代码的下载地址

参考资料： 
微信小程序文档-wx.canvasGetImageData 
UPNG.js下载地址 
代码奉上： 
wxml

<!-- wxml -->
<button bindtap='fetch'>上传</button>
<canvas canvas-id='myCanvas' style="width: 400px; height: 500px;"></canvas>
<image src='{{b64}}'></image>

• 1
• 2
• 3
• 4

js 
这里需要引入一些转base64的js

const upng = require('../../utils/UPNG.js')
//可以在上面的参考资料里进行下载

• 1
• 2

fetch() {
    const ctx = wx.createCanvasContext('myCanvas')
    const platform = wx.getSystemInfoSync().platform
    const imgWidth = 400, imgHeight=500;
    wx.chooseImage({
      success: res => {
      //生成的图片临时路径画成canvas
        ctx.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight)
        ctx.draw(false, () => {
          wx.canvasGetImageData({
            canvasId: 'myCanvas',
            x: 0,
            y: 0,
            width: imgWidth,
            height: imgHeight,
            success: res => {
              if (platform === 'ios') {
                // 兼容处理：ios获取的图片上下颠倒 
                res = this.reverseImgData(res)
              } 
              // 3. png编码
              let pngData = upng.encode([res.data.buffer], res.width, res.height)
              // 4. base64编码
              let base64 = wx.arrayBufferToBase64(pngData)
              // console.log('data:image/jpeg;base64,' + base64)
              this.setData({
                b64: 'data:image/jpeg;base64,' + base64
              });
            },
            fail(res) {
              console.log(res)
            },
          })
        })
      }
    })
  },
  //ios图片处理 
  reverseImgData(res) {
    var w = res.width
    var h = res.height
    let con = 0
    for (var i = 0; i < h / 2; i++) {
      for (var j = 0; j < w * 4; j++) {
        con = res.data[i * w * 4 + j]
        res.data[i * w * 4 + j] = res.data[(h - i - 1) * w * 4 + j]
        res.data[(h - i - 1) * w * 4 + j] = con
      }
    }
    return res
  },

下载地址：https://download.csdn.net/download/weixin_38023551/10513997 
参考资料：https://github.com/zh8637688/wx-cardscanner