循環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異步工作，所以你的循環可能會完成，並且在執行html2canvas代碼之前i變為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 。