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代码包装在函数中，可以确保＆＃34; i＆＃34;的值。仍然如你所愿。

Answer 3

如果您使用的是React，请尝试异步/等待。

将您的JavaScript函数标记为异步。例子

post-body{    
  padding-top: 3rem;
  position: relative;
  box-sizing: inherit;
}
div {
  display: block;
}

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

循环html2canvas

3 个答案: