支付宝或微信小程序，使用canvas时小程序第二次渲染会失败

原创已于 2023-08-08 09:25:45 修改 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #canvas #base64

收录于

于 2021-08-19 15:23:11 首次发布

本文讲述了微信小程序中使用canvas进行图片转base64时，如何通过动态生成唯一的canvas-id来解决页面刷新后画布不显示的问题，确保每次拍照后能正确渲染新的画布。

因为微信小程官方文档有指明:同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
链接指明:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
由：做支付宝小程序，涉及到前端要把图片转为base64,文档支持使用canvas解决，不免会涉及到用户拍完照，不想使用该照片，返回主页面，再选择拍照时，由于第一次已经渲染了，第二次使用将不会渲染
故：保证每次进入主页面的canvas-id唯一即可

//此处，采用canvas-id拼接当前系统的时间保证唯一性
onLoad(){
	 my.getServerTime({
      success: (res) => {
        // my.alert({
        //   content: res.time,
        // });
        // console.log(res)
        that.setData({
          owner:res.time //拼接一个canvas画布时间，保证每次进入页面的id是不同的-防止拍照后取消保存
        })
      },
    });
    that.ctx = my.createCanvasContext('canvas');
}
 <canvas id="canvas{{owner}}" style="display:none"></canvas>