html2canvas Fehler: nicht abgefangener Fehler: IndexSizeError: DOM Exception 1
Ich bin mit html2canvas konvertieren ein div auf einer Leinwand. Wie diese:
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/html2canvas/html2canvas.js"></script>
...
<body id="body">
<div id="demo">
...
</div>
</body>
<script>
$('#demo').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
});
</script>
und ich bekomme diese Fehlermeldung: "nicht abgefangener Fehler: IndexSizeError: DOM Exception 1" in html2canvas.js:
ctx.drawImage( canvas, bounds.left, bounds.top, bounds.width, bounds.height, 0, 0, bounds.width, bounds.height );
Wer hat Ahnung was passiert ist?
- Ich weiß nicht, ob Sie das gleiche erlebt haben mit diesem Fehler, aber was ich fand, war seltsam, war bei mir funktionierte es in Chrom, aber dann getestet im IE und drücken Sie diese Fehler. Vielleicht chrome ist milder.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wann immer Sie nennen
drawImage
auf einer Leinwand, und Sie möchten, um ein Bild zu beschneiden, Sie zu Durchlaufen haben, in 9 Werten.nun, das ist eine Menge Zeug! Es ist wirklich einfach, Fehler zu machen: um Sie zu vermeiden, lassen Sie mich erklären, wie funktioniert die Methode drawImage funktioniert, wenn Sie ein Bild freistellen.
Vorstellen, um ein Quadrat zu zeichnen auf einem Stück Papier. Die Obere linke Ecke des Quadrats zeichnen Sie positioniert ist auf
sourceX
Pixel undsourceY
Pixel, wo 0 ist die Obere linke Ecke Ihres Stück Papier. Die dimension in Pixel Quadrat, das Sie gerade zeichnen, definiert durchsourceWidth
undsourceHeight
.Alles, was sich in dem Kästchen, das Sie definiert haben, werden nun ausgeschnitten und eingefügt Innenseite Ihrer Leinwand an der position (in Pixel)
destX
unddestY
(wo 0 ist die Obere linke Ecke des canvas).Weil wir nicht im realen Leben, das Quadrat, die Sie schneiden kann gestreckt werden und eine andere dimension. Dies ist, warum Sie müssen auch definieren
destWidth
unddestHeight
Hier ist eine grafische Darstellung aller dieser.
Zurück zu Ihrer Frage,
Uncaught Error: IndexSizeError: DOM Exception 1
erscheint normalerweise, wenn der Platz, den Sie versuchen zu schneiden, ist größer als das eigentliche Stück Papier, oder Sie versuchen, schneiden Sie das Stück Papier in einer position, wo es nicht existiert (wiesourceX = -1
, was unmöglich ist, aus offensichtlichen Gründen).Ich habe keine Ahnung, was
bounds.left
,bounds.top
und die anderen sind, aber ich bin mir 99,9% sicher, dass Sie falsche Werte. Versuchenconsole.log
Sie und vergleichen Sie Sie mit dem image-Objekt, das Sie uns zur Verfügung stellen (in diesem Fall Leinwand).Diese ist die
html2canvas
bug-report.Konnte ich fix die nicht abgefangener Fehler: IndexSizeError: DOM Exception 1 durch patchen der html2canvas.js Datei.
durch dies ersetzen:
durch diese:
ich würde sagen, dass Sie wahrscheinlich einige
float
Attribut oderfixed
position auf ein div, dass die Ursache ein container mit Höhe 0, während der Inhalt hat eine überlegene Höhe.ich hatte dieses problem vor, die durch Sie verursacht, weil html2canvas können nicht mit einem Inhalt größer als der container.
zum Beispiel, wenn Sie so etwas wie dieses:
html2canvas erhöhen wird dieser Fehler denn
div
hat eine Höhe von 0, während dieimg
größer ist.eine Korrektur möglich sein wird, um zu erzwingen, Höhe des div zu sein überragender zu Bildhöhe.
Dank Saturnix für deine ausführliche Antwort, Sie hat mir geholfen, herauszufinden, Woher es kam.
ich hoffe das konnte dir helfen,
Hatte ich dasselbe problem. Problem ist passiert als ich versucht habe, Leinwand im inneren ein hidden-element. In meinem Fall bin ich mit Bootstrap-modal und die Leinwand im inneren.
Lösung ist: "Implementieren Leinwand-codes nach element vollständig sichtbar ist".
In meinem Fall habe ich
$('.modal').on('shown.bs.modal', function(){})
statt$('.modal').on('show.bs.modal', function(){})
, weil modales element ist vollständig erschien aufshown.bs.modal
event ; )