循环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();

那就是我们只想在onrendered完成时调用nextStep。

Answer 2

同步代码意味着代码中的每个语句都是一个接一个地执行。

异步代码是相反的，它接受主程序流之外的语句。

html2canvas异步工作，所以你的循环可以完成，并且i在执行html2canvas代码之前变成20 ..

一个解决方案是这样的：

for (let i = 0; i < array.length; i++) {
  generateCanvas(i);
}

function generateCanvas(i){
  html2canvas(..
    // you can use i here
  )
}

通过将html2canvas代码包装在函数中，可以确保“i”的值保持不变。

Answer 3

如果你正在使用react，请尝试async / await。

将您的javascript函数标记为异步。例，

async printDocument(){
  let canvas = await html2canvas(printDiv)
  // canvas to image stuff
}

访问https://medium.com/@patarkf/synchronize-your-asynchronous-code-using-javascripts-async-await-5f3fa5b1366d了解更多信息。