未被捕獲的錯誤：INDEX_SIZE_ERR

我繪製下面的行中的畫布上：未被捕獲的錯誤：INDEX_SIZE_ERR

ctx.drawImage（compositeImage，0，0，image.width，image.height，I，J，scaledCompositeImageWidth，scaledCompositeImageHeight）;

此代碼在Safari，Chrome，Firefox（甚至IE使用谷歌的excanvas庫）上執行了錯誤。然而，最近的更新到Chrome瀏覽器現在引發以下錯誤：

未捕獲的錯誤：INDEX_SIZE_ERR：DOM異常1

這種代碼通常定位部分或全部繪製圖像關閉畫布，任何人有任何想法這裏發生了什麼？

來源

2010-05-27 Gart

是compositeImage指向一個有效的（滿載）圖像？

我見過這個異常發生，如果你試圖在它加載之前繪製圖像。

E.g.

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

爲了保證圖像加載。

來源

2010-06-02 17:56:31 jimr

在我的情況下，我試圖複製具有更大尺寸的圖像 - 即我的精靈圖像有100px，並且我嘗試從80px pos開始複製25px，當我將圖像大小固定爲105px時，所有圖像都開始工作。 – llamerr 2012-10-26 12:20:46

爲什麼？

如果繪製圖像加載之前，因爲這是規定了解釋的drawImage()的第一個參數的HTML5 2dcontext草案它發生：

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

SW，SH是源圖像的寬度和身高

@ jimr的回答很好，只是認爲在這裏添加這個是相關的。

來源

2010-09-22 00:28:59 Quickredfox

由於我的經驗，IE（甚至是版本10）中的INDEX_SIZE_ERR可能發生在您使用錯誤的剪輯尺寸操作的畫布上時。

如果你動態加載你的形象，那麼它很有可能是 image.width和image.height值==0，所以要調用

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

在我的情況的解決方案（即工作）是使用image.naturalWidth而代之以image.naturalHeight。

來源

2014-03-05 14:13:34 malloc4k

此錯誤的另一個原因是，源圖像的尺寸太大;它們超出了實際的圖像尺寸。發生這種情況時，您會在IE中看到此錯誤，但不會在Chrome或Firefox中看到此錯誤。

假設你有一個150×150的圖像：

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上錯誤的原因。

來源

2015-06-09 17:25:41

未被捕獲的錯誤：INDEX_SIZE_ERR

回答

相關問題