Ich habe ein bisschen Probleme beim Implementieren des Skripts html2canvas in einer for-Schleife.

Ich schreibe eine JavaScript-Funktion, die mithilfe eines Arrays von Daten den Stil einer Gruppe von Elementen ändert, das Container-Div als Zeichenfläche aufnimmt, es in ein Bild konvertiert, es an den Dokumentkörper anfügt und dann zum nächsten übergeht Index des Arrays.

Der Teil, an dem ich Probleme habe, befindet sich ganz am Ende meiner Schleife:

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);
    }
});

Beim schrittweisen Durchlaufen des Skripts habe ich festgestellt, dass es nicht darauf wartet, dass die Zeichenfläche gerendert wird, bevor es zur nächsten Iteration der for-Schleife weitergeht. Dies führt dazu, dass das Element, das ich erfassen möchte, sich ändert, aber alle Das gerenderte Bild sieht genauso aus (wie der endgültige Index im Array).

Gibt es eine Möglichkeit, das Skript für eine Sekunde zu verzögern, während die Leinwand gerendert wird? Ich habe versucht mitsetTimeout() und kann scheinbar keine anderen Möglichkeiten finden, das Drehbuch zu verzögern, ich bin nicht vertraut mit, wie dieonrendered Ein Teil des Codes funktioniert.

Wenn meine Erklärung unklar ist, werde ich in Kürze einige geeignete Beispiele vorbereiten.