Error no detectada: INDEX_SIZE_ERR

Question

Estoy dibujando en una lona con la línea siguiente:

ctx.drawImage (compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

Este código ha ejecutado sin errores en Safari, Chrome, Firefox (e incluso IE usando la biblioteca excanvas de google). Sin embargo, una reciente actualización de Chrome ahora lanza el siguiente error:

no detectada de error: INDEX_SIZE_ERR: DOM Excepción 1

Este código menudo posiciona parte o la totalidad de la imagen dibujada de la lona, ​​Alguien tiene alguna idea ¿Que está pasando aqui?

Answer 1

¿Está compositeImage apuntando a una imagen válida (completamente cargada)?

He visto esta excepción suceder si intenta dibujar la imagen antes de que se haya cargado.

E.g.

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

debe ser algo como

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

Para garantizar que la imagen se ha cargado.

Answer 2

¿Por qué?

Ocurre si se dibuja la imagen antes de ser cargado porque es lo que el proyecto de html5 2dcontext especifica para interpretar el primer argumento de drawImage():

If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.

sw, sh siendo la anchura fuente-imagen y altura

La respuesta de @jimr es buena, solo pensé que sería relevante agregar esto aquí.

Answer 3

Debido a mi experiencia, es probable que INDEX_SIZE_ERR en IE (incluso la versión 10) suceda cuando está operando en un lienzo que ha sido manipulado con drawImage() con un tamaño de clip incorrecto.

Y si ha cargado la imagen de forma dinámica, entonces es probable que los valores de image.width y image.height son ==0, por lo que está invocando

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

En mi caso, la solución (que funcionaba) era utilizar image.naturalWidth y image.naturalHeight en su lugar.

Answer 4

Otra causa de este error es que las dimensiones de la imagen de origen son demasiado grandes; se extienden más allá de las dimensiones reales de la imagen. Cuando esto ocurre, verá este error en IE, pero no en Chrome o Firefox.

Digamos que tiene una imagen de 150x150:

var imageElement = ...; 

Entonces, si intenta dibujar usando grandes dimensiones de origen:

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

Esto lanzará INDEX_SIZE_ERR en IE. (La última es decir, ser EI11 en el momento de escribir estas líneas.)

La solución es simplemente limitando las dimensiones de origen:

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

respuesta de malloc4k alude a esto, sin embargo, sugirió que era porque image.width era cero. Agregué esta nueva respuesta porque el ancho de la imagen que es cero no es necesariamente la causa del error en IE.