小程序canvas轉base64方法 使用upng庫 親測沒問題

 

普通字符串base64編碼轉化可使用原生的atob和btoa方法

圖片轉碼：傳統的圖片轉base64的方法能夠採用FileReader的readAsDataURL()或canvas.toDataURL('image/jpeg')

參考：https://blog.csdn.net/oulihong123/article/details/73927514

可是使人無語的是以上原生方法在微信小程序中都沒有，只有小遊戲中提供了toDataURL方法，因此以上方法在小程序中就沒用了，網上有大神采用upng庫+wx.arrayBufferToBase64

來實現了base64編碼轉換，本人親測可行。

 

參考 https://github.com/photopea/UPNG.js     使用案例：https://github.com/zhousning/wx-cardscanner，須要用到的兩個js文件可從案例中複製

使用upng，也須要pako，一塊下載下來放到utils文件夾下

var Base64 = require('../../utils/base64.js')

stopDraw: function(e) {
    ctx.stroke();
    ctx.draw(true, function(){
      wx.canvasGetImageData({
        canvasId: 'game-canvas-answer',
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        
        success: function(res) {
          let arrayBuffer = upng.encode([res.data.buffer], res.width, res.height)
          var imageBase64 = wx.arrayBufferToBase64(arrayBuffer);
        }
      })
    });
  }