html2canvas 同时更新画布数据答案

【问题标题】：html2canvas while updating canvas datahtml2canvas 同时更新画布数据
【发布时间】：2016-03-15 10:07:52
【问题描述】：

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

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

console.log(plot_array);

绘图数组记录为空... ??

【问题讨论】：

如果我是对的，一旦画布被渲染，onrendered 函数就会被调用。如果您在html2canvas 之后立即调用console.log，则画布还不会被渲染，因此不会向您的plot_array 推送任何内容。
尝试在onrendered函数内移动console.log(plot_array);，在push之后。
html2canvas 函数实际上是在一个 for 循环中..，所以.,我需要在渲染后记录所有数据..
你不能让它记录每个循环吗？最后一个将记录整个数组。另一种方法是在循环完成后运行“console.log”函数。
iam 在 for 循环之后进行 ajax 调用..，所以我需要具有精确数据的数组..，

标签： javascript canvas html2canvas

【解决方案1】：

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

【讨论】：

我如何得到它..，即：我怎么能知道画布何时渲染..？？
好吧，当您进行基于事件的编程时，您必须有一些不同的想法。例如，您将对这个事件产生“反应”：显示警报弹出窗口可能是一个很好的第一个。逻辑是你不再阻塞，等待操作完成。你能提供更多关于你以后想做的事情的背景吗？
html2canvas 函数实际上是在一个 for 循环中..，所以.，我需要在渲染后记录所有数据。

【解决方案2】：

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

如Kaiido所回答的

【讨论】：