Erreur non détectée: INDEX_SIZE_ERR

Je suis de dessin sur une toile avec la ligne suivante:

ctx.drawImage(compositeImage, 0, 0, image.largeur de l'image.hauteur, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

Ce code est exécuté sans erreur sur Safari, Chrome, Firefox (et même IE à l'aide de google excanvas de la bibliothèque). Cependant, une récente mise à jour de Chrome envoie maintenant l'erreur suivante:

Erreur non interceptée: INDEX_SIZE_ERR: DOM Exception 1

Ce code souvent les positions de la partie ou de la totalité de l'image tracée HORS de la toile, tout le monde a une idée de ce qui se passe ici?

source d'informationauteur Gart

  1. 20

    Est compositeImage pointant sur un valide (entièrement chargé) de l'image?

    J'ai vu cette exception se passera si vous essayez de dessiner l'image avant de l'a chargé.

    E. g.

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

    Doit être quelque chose comme

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

    Pour s'assurer que l'image est chargée.

  2. 8

    Pourquoi?

    Il arrive si vous dessinez l'image avant de les charger, parce que c'est ce que le html5 2dcontext projet précise pour interpréter le premier argument de drawImage():

    Si l'un des sw ou sh arguments est égale à zéro, la mise en œuvre doit soulever une INDEX_SIZE_ERR exception.

    so, sh être à la source de l'image largeur et la hauteur

    @jimr la réponse est bonne, juste pensé qu'il serait pertinent d'ajouter ici.

  3. 3

    Une autre cause de cette erreur, les dimensions de la source de l'image sont trop grandes; elles s'étendent au-delà de la réelle dimension de l'image. Lorsque cela se produit, vous verrez cette erreur sous IE, mais pas dans Chrome ou Firefox.

    Dire que vous avez un 150x150 image:

    var imageElement = ...;

    Alors si vous essayez de dessiner à l'aide de grandes dimensions source:

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

    Cela permettra de jeter INDEX_SIZE_ERR sur IE. (La dernière IE étant IE11 au moment d'écrire ces lignes.)

    La solution est tout simplement le fait de contraindre la source dimensions:

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

    malloc4k réponse fait allusion à cela, cependant, il a suggéré que c'était à cause de l'image.la largeur était de zéro. J'ai ajouté cette nouvelle réponse, car la largeur de l'image en cours de zéro n'est pas nécessairement la cause de l'erreur sur IE.

  4. 1

    En raison de mon expérience, INDEX_SIZE_ERR dans IE (même la version 10) est susceptible de se produire lorsque vous êtes sur toile qui a été manipulé avec drawImage() avec un mauvais clip de la taille.

    Et si vous avez chargé votre image de façon dynamique, alors il est probable que les valeurs de
    image.width et image.height sont ==0de sorte que vous êtes en invoquant

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

    Dans mon cas, la solution (qui a fonctionné) était d'utiliser image.naturalWidth et image.naturalHeight à la place.