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

  • 因为微信小程官方文档有指明:同一页面中的 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>

你可能感兴趣的:(小程序,canvas,base64)