html2canvas Fehler: Uncaught Fehler: IndexSizeError: DOM Ausnahme 1

Immer wenn Sie drawImage auf einer Zeichenfläche aufrufen und ein Bild zuschneiden möchten, müssen Sie 9 Werte übergeben.

das ist jetzt eine Menge Zeug! Es ist wirklich einfach, Fehler zu machen: Um sie zu vermeiden, lassen Sie mich erklären, wie drawImage funktioniert, wenn Sie ein Bild beschneiden.

Alles innerhalb des Quadrats, das Sie definiert haben, wird jetzt innerhalb der Zeichenfläche an der Position (in Pixeln) destX und destY (0 ist die obere linke Ecke der Zeichenfläche) ausgeschnitten und eingefügt. .

Da wir nicht im wirklichen Leben sind, kann das Quadrat, das Sie schneiden, gestreckt sein und eine andere Dimension haben. Deshalb müssen Sie auch destWidth und destHeight

Hier ist eine grafische Darstellung von all dem.

Um zu Ihrer Frage zurückzukehren, erscheint Uncaught Error: IndexSizeError: DOM Exception 1 normalerweise, wenn das Quadrat, das Sie zu schneiden versuchen, größer ist als das tatsächliche Stück Papier, oder Sie versuchen, das Blatt Papier in einer Position zu schneiden, wo es nicht ist existiert nicht (wie sourceX = -1 , was aus offensichtlichen Gründen unmöglich ist).

Ich habe keine Ahnung, was bounds.left , bounds.top und die anderen sind, aber ich bin 99.9% sicher, dass sie falsche Werte sind. Probieren Sie console.log sie aus und vergleichen Sie sie mit dem Bildobjekt, das Sie bereitstellen (in diesem Fall der Zeichenbereich).

Dies ist der html2canvas Fehlerbericht.

Ich konnte den Fehler Uncaught Error: IndexSizeError: DOM Exception 1 beheben, indem ich die Datei html2canvas.js patchen.

ersetzen Sie dies:

dadurch:

Ich würde sagen, dass Sie wahrscheinlich float -Attribut oder fixed -Position auf einem div haben, die bewirken, dass ein Container die Höhe 0 hat, während der Inhalt eine höhere Höhe hat. Ich hatte dieses Problem vorher verursacht, weil html2canvas nicht mit einem Inhalt umgehen kann, der größer als sein Container ist. Wenn Sie beispielsweise Folgendes haben:

html2canvas wird diesen Fehler verursachen, weil div eine Höhe von 0 hat, während img größer ist. Eine mögliche Korrektur besteht darin, die Höhe von div so zu erzwingen, dass sie der Bildhöhe entspricht.

danke Saturnix für Ihre ausführliche Antwort, Sie haben mir geholfen, herauszufinden, woher es kam.

Ich hoffe, das könnte dir helfen,

Ich hatte dasselbe Problem. Problem ist aufgetreten, als ich versucht habe, Canvas in einem versteckten Element zu verwenden. In meinem Fall verwende ich Bootstrap-Modal und die Leinwand darin.

Lösung ist: "Implementieren Sie Canvas-Codes, nachdem das Element vollständig sichtbar ist" .

In meinem Fall muss ich $('.modal').on('shown.bs.modal', function(){}) anstelle von $('.modal').on('show.bs.modal', function(){}) verwenden, weil das modale Element vollständig auf shown.bs.modal event erscheint; )