微信小程序base64图片 canvas 画布 drawImage 实现分享海报 - WXOPEN Club

在微信小程序中 canvas drawImage API 传入的第一个参数是图片资源路径，这个参数通常由wx.chooseImage 或 wx.getImageInfo 获取图片信息来获得。

而 base64 格式图片数据，无法被 getImageInfo 直接调用，以下是解决方案：

首先使用 wx.base64ToArrayBuffer 将 base64 数据转换为 ArrayBuffer 数据
使用 FileSystemManager.writeFile 将 ArrayBuffer 数据写为本地用户路径的二进制图片文件
此时的图片文件路径在 wx.env.USER_DATA_PATH 中， wx.getImageInfo 接口能正确获取到这个图片资源并 drawImage 至 canvas 上

以下是具体的转换代码：
getImgCode(url) {
//自己接口获取base64图片
let res = await this.$http.post(’/WeixinMin/getEqr’, {
pages: url
})
if (res.code == 1) {
const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = ‘tmp_base64src’;
const filePath = ${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME};
//base64 数据转换为 ArrayBuffer 数据
const buffer = wx.base64ToArrayBuffer(res.data.image);
fsm.writeFile({
filePath: filePath,
data: buffer,
encoding: ‘binary’,
success: () => {
console.log('写入成功, 路径: ', filePath);
},
fail: err => {
console.log(“失败******”, err);
},
});
}
}

gangdong 1楼•2 年前

我的没有效果？？

 util.POSTNOECODE("Wx/GetUnlimited",params,res=>{
      var base64Data = res.data.data;
      /// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
        util.base64src(base64Data ).then(res=>{
         console.log("then")
         console.log(res)
        //  context.drawImage(res,0,0,200,200)
         this.setData({
           tempPath:res
         })
         const ctx = wx.createCanvasContext('myCanvas')
         ctx.drawImage(res, 0, 0, 1500, 1000)
       })