正文

小程序canvas转base64方法 使用upng库 亲测没问题

IP云
IP云V管理员/4 阅读
07/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

普通字符串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: , y: , width: , height: , success: function(res) { let arrayBuffer = upng.encode([res.data.buffer], res.width, res.height) var imageBase64 = wx.arrayBufferToBase64(arrayBuffer); } }) }); }