javascript - 循环 html2canvas

Question

我在尝试在 for 循环中实现 html2canvas 脚本时遇到了一些麻烦。

我正在编写一个 Javascript 函数，它使用数据数组来修改一组元素的样式，将容器 div 捕获为 Canvas ，将其转换为图像，将其附加到文档主体，然后继续到数组的下一个索引。

我遇到麻烦的部分是在循环的最后:

html2canvas(document.getElementById("background"), {
    onrendered: function(canvas) {
        var imgdata = canvas.toDataURL("image/png");
        var obj = document.createElement("img");
        obj.src=imgdata;
        document.body.appendChild(obj);
    }
});

通过逐步查看脚本，我发现在继续 for 循环的下一次迭代之前，它并没有等待 Canvas 被渲染，这导致了我试图捕获的元素改变但每张渲染的图像看起来完全一样(作为数组中的最终索引)。

有没有办法在 Canvas 渲染时将脚本延迟一秒钟？我已经尝试使用 setTimeout() 并且似乎找不到任何其他延迟脚本的方法，我不熟悉代码的 onrendered 部分是如何工作的。

如果我的解释不清楚，我会尽快准备一些合适的例子。

Answer 1

您可能想阅读有关异步工作流的内容(如 https://github.com/caolan/async)

简而言之，试试这个:

var i = 0;
function nextStep(){
  i++;
  if(i >= 30) return;
  // some body
  html2canvas(...
    onrendered: function(canvas){
      // that img stuff
      nextStep();
    }
  }
}
nextStep();

也就是说，我们只想在 onrendered 完成时调用 nextStep。