微信小程序动态页面二维码在canvas中显示问题

最新推荐文章于 2025-11-08 15:02:52 发布

原创最新推荐文章于 2025-11-08 15:02:52 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #二维码

小程序专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种解决Base64格式二维码在Canvas上显示异常的方法，通过替换特殊字符并转换为ArrayBuffer，最终成功在画布上正确显示二维码图片。

为了做分享海报，需要页面的动态二维码，后台返回一个base64格式的数据，在canvas上显示不正常，下面是正确写法：

  const fsm = wx.getFileSystemManager();
  let showImgData = json.data.data.base64Url;//二维码数据
  showImgData = showImgData.replace(/\ +/g, "");
  showImgData = showImgData.replace(/[\r\n]/g, "");
  const buffer = wx.base64ToArrayBuffer(showImgData);
  const fileName = wx.env.USER_DATA_PATH + '/share_img.png'
  fsm.writeFileSync( fileName, buffer, 'binary')
  showImgData = fileName;  //处理完成
  const ctx =  wx.createCanvasContext('myCanvas');
  ctx.drawImage(showImgData , 280/ 2 * w, 570/ 2 * w, 90/ 2 * w, 90/ 2 * w)