未捕获的错误:INDEX_SIZE_ERR

Question

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

ctx.drawImage(compositeImage,0,0,image.width,image.height,i,j,scaledCompositeImageWidth,scaledCompositeImageHeight);

此代码在Safari,Chrome,Firefox(甚至是使用谷歌的excanvas库的IE)上执行了错误.但是,最近对Chrome的更新现在会引发以下错误:

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

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

Answer 1

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

确保图像已加载.

在我的情况下,我试图复制具有更大尺寸的图像 - 即我的精灵图像具有100px,并且我试图从80px pos开始复制25px,当我将图像尺寸固定为105px时全部开始工作. (2认同)

Answer 2

为什么？

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

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

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

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