11

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

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

此代码通常将部分或全部绘制的图像置于画布之外，有人知道这里发生了什么吗？

4

4 回答 4

20

是否compositeImage指向一个有效的（完全加载的）图像？

如果您尝试在图像加载之前绘制图像，我已经看到会发生此异常。

例如

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-02T17:56:31.887 回答
8

为什么？

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

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

sw, sh 是源图像的宽度和高度

@jimr 的答案很好，只是认为在此处添加此内容很相关。

于 2010-09-22T00:28:59.047 回答
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 错误的原因。

于 2015-06-09T17:25:41.460 回答
1

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

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

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

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

于 2014-03-05T14:13:34.537 回答