Uncaught Błąd: INDEX_SIZE_ERR

Question

mam rysunek na płótnie z następującą linię:

ctx.drawImage (compositeImage, 0, 0, image.width, image.height, I, J, scaledCompositeImageWidth, scaledCompositeImageHeight);

Ten kod został wykonany bez błędów w Safari, Chrome, Firefox (a nawet IE przy użyciu biblioteki excanvas google). Jednak najnowsza aktualizacja Chrome teraz rzuca się następujący błąd:

Uncaught Błąd: INDEX_SIZE_ERR: DOM Exception 1

Kod ten często pozycjonuje część lub całość narysowanych obrazu OFF płótnie, ktoś ma jakiś pomysł co tu się dzieje?

Answer 1

Czy compositeImage wskazuje na prawidłowy (w pełni załadowany) obraz?

Widziałem ten wyjątek, jeśli spróbujesz narysować obraz, zanim zostanie załadowany.

E.g.

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

powinno być coś jak

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

Aby zapewnić obraz został załadowany.

Answer 2

Dlaczego?

Zdarza się, jeśli narysować obraz, zanim zostanie załadowany, ponieważ to właśnie projekt html5 2dcontext określa interpretacji pierwszy argument drawImage():

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

SW, sh będąc szerokość źródłowego obrazu oraz wysokość

@ Odpowiedź jimr jest dobra, pomyśleliśmy, że byłoby istotne, aby dodać to tutaj.

Answer 3

Z mojego doświadczenia wynika, że ​​INDEX_SIZE_ERR w IE (nawet wersja 10) może się zdarzyć podczas pracy na płótnie, które zostało zmanipulowane za pomocą drawImage() o niewłaściwym rozmiarze klipu.

A jeśli załadowany obraz dynamicznie, to jest prawdopodobne, że wartości image.width i image.height są ==0, więc są powołując

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

W moim przypadku rozwiązania (który pracował) było użycie image.naturalWidth i zamiast tego: image.naturalHeight.

Answer 4

Inną przyczyną tego błędu jest to, że wymiary obrazu źródłowego są zbyt duże; wykraczają poza rzeczywiste wymiary obrazu. W takim przypadku pojawi się ten błąd w przeglądarce IE, ale nie w przeglądarce Chrome ani Firefox.

Say masz 150x150 obraz:

var imageElement = ...; 

Następnie, jeśli staramy się wyciągnąć go z użyciem większych wymiarów źródłowych:

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

Ten rzuci INDEX_SIZE_ERR na IE. (Najnowszy IE jest IE11 w chwili pisania tego tekstu).

Rozwiązaniem jest po prostu ograniczanie wymiary źródło:

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

malloc4k za odpowiedź nawiązywał do tego, jednak zasugerował, że to dlatego image.width było zero. Dodałem tę nową odpowiedź, ponieważ szerokość obrazu wynosząca zero nie musi być przyczyną błędu w IE.