Question

我正在使用以下行绘制画布：

ctx.drawImage（compositeImage，0,0，image.width，image.height，i，j，scaledCompositeImageWidth，scaledCompositeImageHeight）;

此代码在Safari，Chrome，Firefox（甚至使用google的excanvas库的IE）上执行了错误。但是，最近对Chrome的更新现在会引发以下错误：

未捕获错误：INDEX_SIZE_ERR：DOM异常1

这段代码经常将部分或全部绘制的图像放在画布上，任何人都知道这里发生了什么？

Answer 1

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

确保图像已加载。

Answer 2

为什么？

如果您在加载图像之前绘制图像会发生这种情况，因为这是html5 2dcontext草稿指定用于解释drawImage()的第一个参数的内容：

如果其中一个sw或sh参数为零，则实现必须引发INDEX_SIZE_ERR异常。

sw，sh是源图像宽度和高度

@ jimr的答案很好，只是认为在这里添加它是相关的。

Answer 3

此错误的另一个原因是源图像的尺寸太大;它们超出了实际的图像尺寸。发生这种情况时，您会在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);

这将在IE上抛出INDEX_SIZE_ERR。（在撰写本文时，最新的IE浏览器是IE11。）

修复只是限制源维度：

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

然而，malloc4k的答案提到了这一点，他建议这是因为image.width为零。我添加了这个新答案，因为图像宽度为零并不一定是IE上错误的原因。

Answer 4

根据我的经验，当您在使用drawImage()处理错误剪辑大小的画布上操作时，IE（甚至版本10）中的INDEX_SIZE_ERR可能会发生。

如果你动态加载你的图像，那很可能就是你的值 image.width和image.height为==0，因此您正在调用

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

就我而言，解决方案（有效）是使用image.naturalWidth和image.naturalHeight代替。

未捕获的错误：INDEX_SIZE_ERR

4 个答案: