Uncaught Ошибка: INDEX_SIZE_ERR - PullRequest
Новая
       13

Uncaught Ошибка: INDEX_SIZE_ERR

11 голосов
/ 27 мая 2010

Я рисую на холсте следующей строкой:

ctx.drawImage (смесьImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);

Этот код без ошибок выполнен в Safari, Chrome, Firefox (и даже в IE с использованием библиотеки Google Excanvas). Однако недавнее обновление Chrome теперь выдает следующую ошибку:

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1

Этот код часто размещает часть или все нарисованное изображение вне холста, кто-нибудь знает, что здесь происходит?

Ответы [ 4 ]

20 голосов
/ 02 июня 2010

Указывает ли compositeImage на действительное (полностью загруженное) изображение?

Я видел это исключение, если вы пытаетесь нарисовать изображение до его загрузки.

* 1006 Е.Г. * 

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

Должно быть что-то вроде 

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

Чтобы убедиться, что изображение загружено.

8 голосов
/ 22 сентября 2010

Почему?

Это происходит, если вы рисуете изображение до его загрузки, потому что это то, что черновик html5 2dcontext указывает для интерпретации первого аргумента drawImage():

Если один из аргументов sw или sh равен нулю, реализация должна вызвать исключение INDEX_SIZE_ERR.

sw, sh - ширина и высота исходного изображения

@ Ответ Джимра хорош, просто подумал, что было бы уместно добавить это сюда.

3 голосов
/ 09 июня 2015

Другая причина этой ошибки - слишком большие размеры исходного изображения; они выходят за пределы фактических размеров изображения. Когда это происходит, вы увидите эту ошибку в IE, но не в Chrome или Firefox.

Скажем, у вас есть изображение 150x150: 

var imageElement = ...;

Тогда, если вы попытаетесь нарисовать его, используя большие исходные размеры: 

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

Это вызовет INDEX_SIZE_ERR в IE. (Последний IE был IE11 на момент написания этой статьи.)

Исправление просто ограничивает исходные размеры: 

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

Ответ malloc4k ссылался на это, однако он предположил, что это потому, что image.width было нулевым. Я добавил этот новый ответ, потому что нулевая ширина изображения не обязательно является причиной ошибки в IE.

1 голос
/ 05 марта 2014

Из-за моего опыта, INDEX_SIZE_ERR в IE (даже версия 10), скорее всего, произойдет, когда вы работаете на холсте, которым манипулировали с drawImage() с неправильным размером клипа.

А если вы загрузили изображение динамически, то, скорее всего, значения image.width и image.height равны ==0, поэтому вы вызываете 

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

В моем случае решение (которое сработало) заключалось в использовании image.naturalWidth и image.naturalHeight вместо.

...