我正在画布上绘制以下行：
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
此代码通常将部分或全部绘制的图像置于画布之外，有人知道这里发生了什么吗？
【问题讨论】：
标签： javascript google-chrome canvas drawimage
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';
确保图片已加载。
【讨论】：
为什么？
如果您在加载之前绘制图像，则会发生这种情况，因为这是 html5 2dcontext 草案指定用于解释 drawImage() 的第一个参数：
如果 sw 或 sh 参数之一为零，则实现必须引发 INDEX_SIZE_ERR 异常。
sw, sh 是源图像的宽度和高度
@jimr 的回答很好，只是觉得在这里添加这个会很相关。
【讨论】：
这个错误的另一个原因是，源图像的尺寸太大；它们超出了实际的图像尺寸。发生这种情况时，您会在 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 错误的原因。
【讨论】：
根据我的经验，当您在已使用 drawImage() 操作且剪辑大小错误的画布上进行操作时，IE（甚至是版本 10）中的 INDEX_SIZE_ERR 可能会发生。
如果你动态加载你的图片，那么很可能是
image.width 和 image.height 是 ==0，所以你正在调用
ctx.drawImage(compositeImage, 0, 0, 0, 0, ...
就我而言，解决方案（有效）是改用image.naturalWidth 和image.naturalHeight。
【讨论】：