6

for ループで html2canvas スクリプトを実装しようとすると、少し問題が発生します。

データの配列を使用して要素のグループのスタイルを変更し、コンテナの div をキャンバスとしてキャプチャし、それを画像に変換し、それをドキュメントの本文に追加してから次の処理に進む Javascript 関数を作成しています。配列のインデックス。

問題が発生している部分は、ループの最後にあります。

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 ループの次の反復に進む前にキャンバスがレンダリングされるのを待っていないことがわかりました。これにより、キャプチャしようとしている要素が変化しますが、すべて画像はまったく同じようにレンダリングされます (配列の最終インデックスと同じです)。

キャンバスのレンダリング中にスクリプトを 1 秒間遅らせる方法はありますか? 私は使用してみましたがsetTimeout()、スクリプトを遅らせる他の方法を見つけることができないようですonrendered。コードの一部がどのように機能するのかよくわかりません。

私の説明が不明確な場合は、すぐに適切な例をいくつか用意します。

4

3 に答える 3

16

非同期ワークフロー ( 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 が終了したときにのみ呼び出したいということです。

于 2013-04-29T11:58:55.200 に答える
1

反応を使用している場合は、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にアクセスしてください。

于 2019-04-02T01:15:01.737 に答える