Nicht abgefangener Fehler: INDEX_SIZE_ERR

Bin ich die Zeichnung auf eine Leinwand mit der folgenden Zeile:

ctx.drawImage(compositeImage, 0, 0, Bild.width, Bild.Höhe, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

Dieser code ausgeführt hat, fehlerfrei auf Safari, Chrome, Firefox (und auch IE mit google excanvas-Bibliothek). Aber eine aktuelle update für Chrome wirft nun die folgende Fehlermeldung:

Nicht abgefangener Fehler: INDEX_SIZE_ERR: DOM Exception 1

Dieser code oft Positionen, die alle oder einen Teil der gezeichneten Bild AUS der Leinwand, hat jemand eine Idee, was hier Los ist?

InformationsquelleAutor Gart | 2010-05-27

  1. 20

    Ist compositeImage zeigt auf ein gültiges (voll geladen) Bild?

    Ich habe gesehen, diese Ausnahme wird passieren, wenn Sie versuchen, ziehen Sie das Bild, bevor es geladen wurde.

    E. g.

    img = new Image();
img.src = '/some/image.png';
ctx.drawImage( img, ..... ); //Throws error

    Sollte so etwas wie

    img = new Image();
img.onload = function() {
  ctx.drawImage( img, .... );
};
img.src = '/some/image.png';

    Um sicherzustellen, das Bild geladen hat.

    In meinem Fall war ich versucht zu kopieren Bild mit mehr Größe, die es hatte - also mein sprite hatte 100px, und ich versuchte zu kopieren 25px ab 80px pos, wenn ich Feste Bildgröße zu 105px alle angefangen zu arbeiten.

    InformationsquelleAutor jimr

  2. 8

    Warum?

    Es passiert, wenn Sie ziehen Sie das Bild, bevor es geladen ist, denn das ist das, was die html5-2dcontext Entwurf gibt, die für die Auslegung das erste argument drawImage():

    Wenn man von der sw oder sh Argumente null ist, muss die Umsetzung wirft eine INDEX_SIZE_ERR Ausnahme.

    sw -, sh-als-Quelle-Bild-Breite und Höhe

    @jimr s Antwort ist gut, dachte nur, es wäre relevant, fügen Sie diese hier.

    InformationsquelleAutor Quickredfox

  3. 3

    Andere Ursache für diese Fehlermeldung ist, die Dimensionen des Quellbildes sind zu groß; Sie erstrecken sich über die tatsächlichen Abmessungen der Bilder. Wenn dies geschieht,, Sie werden sehen, dass dieser Fehler im IE, aber nicht im Chrome oder Firefox.

    Sagen, Sie haben ein 150x150 Bild:

    var imageElement = ...;

    Dann, wenn Sie versuchen, ziehen Sie es mit größeren Quell-Abmessungen:

    var sourceX = 0;
var sourceY = 0;
var sourceWidth = 200; //Too big!
var sourceHeight = 200; //Too big!
canvasContext.drawImage(imageElement, 
   sourceX, sourceY, sourceWidth, sourceHeight, //Too big! Will throw INDEX_SIZE_ERR
   destX, destY, destWidth, destHeight);

    Diese werfen INDEX_SIZE_ERR auf IE. (Der Letzte IE sein IE11 zum Zeitpunkt des Schreibens dieses Artikels.)

    Das Update ist einfach das einschränken des source-Abmessungen:

    var sourceWidth = Math.min(200, imageElement.naturalWidth);
var sourceHeight = Math.min(200, imageElement.naturalHeight);

    malloc4k Antwort darauf angespielt, jedoch schlug er vor, es war, weil Bild.die Breite war gleich null. Ich fügte hinzu, diese neue Antwort, weil die Breite des Bildes null ist nicht unbedingt die Ursache für den Fehler auf den IE.

    InformationsquelleAutor Judah Gabriel Himango

  4. 1

    Aufgrund meiner Erfahrung, INDEX_SIZE_ERR im IE (auch version 10) ist wahrscheinlich passieren, wenn Sie in Betrieb sind, auf die Leinwand bearbeitet wurde mit drawImage() mit falschen clip Größe.

    - Und wenn Sie geladen Ihr Bild dynamisch, dann ist es wahrscheinlich, dass die Werte von
    image.width und image.height sind ==0 ein, so werden Sie den Aufruf

    ctx.drawImage(compositeImage, 0, 0, 0, 0, ...

    In meinem Fall die Lösung (die funktioniert), war der Einsatz von image.naturalWidth und image.naturalHeight statt.

    InformationsquelleAutor malloc4k

Schreibe einen Kommentar