Javascript 未捕获的错误：INDEX_SIZE_ERR
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2923564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: INDEX_SIZE_ERR
提问by Gart
I am drawing on a canvas with the following line:
我在画布上画画，下面一行：
ctx.drawImage(compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);
ctx.drawImage(compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight);
This code has executed error free on Safari, Chrome, Firefox (and even IE using google's excanvas library). However, a recent update to Chrome now throws the following error:
这段代码在 Safari、Chrome、Firefox（甚至使用 google 的 excanvas 库的 IE）上都没有错误地执行。但是，最近对 Chrome 的更新现在会引发以下错误：
Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1
未捕获的错误：INDEX_SIZE_ERR：DOM 异常 1
This code often positions part or all of the drawn image OFF the canvas, anyone got any idea what's going on here?
这段代码经常将部分或全部绘制的图像放置在画布之外，有人知道这里发生了什么吗？
回答by jimr
Is compositeImagepointing at a valid (fully loaded) image?
是否compositeImage指向有效（完全加载）的图像？
I've seen this exception happen if you try to draw the image before it has loaded.
如果您在加载图像之前尝试绘制图像，我已经看到会发生此异常。
E.g.
例如
img = new Image();
img.src = '/some/image.png';
ctx.drawImage( img, ..... ); // Throws error
Should be something like
应该是这样的
img = new Image();
img.onload = function() {
ctx.drawImage( img, .... );
};
img.src = '/some/image.png';
To ensure the image has loaded.
以确保图像已加载。
回答by Quickredfox
Why?
为什么？
It happens if you draw the image before it is loaded because that is what the html5 2dcontext draft specifies for interpreting the first argument of drawImage():
如果您在加载图像之前绘制图像，则会发生这种情况，因为这是 html5 2dcontext 草案指定用于解释 的第一个参数的内容drawImage()：
If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.
如果 sw 或 sh 参数之一为零，则实现必须引发 INDEX_SIZE_ERR 异常。
sw, sh being source-image width and height
sw, sh 是源图像的宽度和高度
@jimr's answer is good, just thought it would be relevant to add this here.
@jimr 的回答很好，只是认为在这里添加它是相关的。
回答by Judah Gabriel Himango
Another cause for this error is, the dimensions of the source image are too large; they extend beyond the actual image dimensions. When this occurs, you'll see this error in IE, but not in Chrome or Firefox.
此错误的另一个原因是，源图像的尺寸太大；它们超出了实际的图像尺寸。发生这种情况时，您会在 IE 中看到此错误，但不会在 Chrome 或 Firefox 中看到。
Say you have a 150x150 image:
假设您有一个 150x150 的图像：
var imageElement = ...;
Then if you try to draw it using larger source dimensions:
然后，如果您尝试使用更大的源尺寸绘制它：
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);
This will throw INDEX_SIZE_ERR on IE. (The latest IE being IE11 at the time of this writing.)
这将在 IE 上抛出 INDEX_SIZE_ERR。（在撰写本文时，最新的 IE 为 IE11。）
The fix is simply constraining the source dimensions:
修复只是限制源维度：
var sourceWidth = Math.min(200, imageElement.naturalWidth);
var sourceHeight = Math.min(200, imageElement.naturalHeight);
malloc4k's answer alluded to this, however, he suggested it was because image.width was zero. I added this new answer because image width being zero is not necessarily the cause of the error on IE.
malloc4k 的回答暗示了这一点，但是，他认为这是因为 image.width 为零。我添加了这个新答案，因为图像宽度为零不一定是 IE 错误的原因。
回答by malloc4k
Due to my experience, INDEX_SIZE_ERR in IE (even version 10) is likely to happen when you are operating on canvas that has been manipulated with drawImage()with wrong clip size.
根据我的经验，当您在drawImage()使用错误剪辑大小操作的画布上操作时，IE（甚至版本 10）中的 INDEX_SIZE_ERR 可能会发生。
And if you loaded your image dynamically, then it is likely that values of
image.widthand image.heightare ==0, so you are invoking
如果你动态加载的图像，那么很可能的价值观
image.width和image.height是==0，让你调用
ctx.drawImage(compositeImage, 0, 0, 0, 0, ...
In my case the solution (that worked) was to use image.naturalWidthand image.naturalHeightinstead.
在我的情况下，解决方案（有效）是使用image.naturalWidth和image.naturalHeight代替。
