循环html2canvas

Question

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

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

我遇到麻烦的部分是在我的循环结束时:

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循环的下一次迭代之前,它不会等待渲染画布,这会导致我试图捕获的元素发生变化但是每个正在渲染的图像看起来完全相同(作为数组中的最终索引).

有没有办法在画布渲染时延迟脚本一秒钟？我试过使用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();

那就是我们只想nextStep在onrendered结束时调用.