html2canvas 同时更新 canvas 数据

Question

绘图数组是一个全局变量。, 而 console.log onrendered 函数中的 canvas 参数 ..，数据存在。但是..当在函数外登录时..，给出空数组

html2canvas(document.querySelector(".classone"),{
  onrendered:function(canvas){
      plot_array.push({canvasdata:canvas.toDataURL('image/png')});
  }
});

console.log(plot_array);

the plot array logged as empty... ??

Answer 1

这是因为渲染的事件还没有被传播。这是完全正常且可以接受的行为：您希望仅在 canvas 完成绘制后才填充此数组。

Answer 2

欢迎来到 js。 html2canvas 是一个异步函数。在早期版本中，你必须提供一个回调函数作为参数，而现在，它确实使用了 Promises。在任何情况下，您只需要在调用之前设置一个计数器变量，并在回调中递增它。一旦计数器达到要进行的调用次数，所有异步函数都已完成，您可以继续您的 ajax 调用。因此，使用您的实际代码（使用旧版本的 h2c）在循环之前：var rendered = 0; 然后在循环中 h2c(... onrendered: function(){...if(++rendered===calls.length){ajax()})})

由 Kaiido

回答

html2canvas 同时更新 canvas 数据

html2canvas while updating canvas data

javascript

canvas

html2canvas