javascript - IE 和 Edge 上 drawImage 的 IndexSizeError

Question

我发现某些代码在 Internet Explorer 和 Edge 中失败，但在 Chrome 和 Firefox 中似乎可以完美运行:

var image = document.getElementById("myImage");
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.drawImage(image, 1, 0, 499, 278, 0, 0, 749, 417);

img {
  width: 300px;
  height: 200px;
}

<img id="myImage" src="https://image.ibb.co/bsANfm/emptyphoto.png" />

<canvas id="myCanvas" width="600" height="400"></canvas>

出于某种原因，CanvasRenderingContext2D.drawImage() 调用在 IE 11 和 Edge 40.15063.674.0 中失败，我收到了 IndexSizeError 异常。 According to MDN ，如果 Canvas 或源矩形的大小为 0，我应该只会收到此错误，而这里不是这种情况。

任何人都可以阐明我是否在这里做错了什么，或者是否有一些可用的解决方法？

Answer 1

我找到了罪魁祸首。本质上，我一直在要求浏览器绘制从 y=0 到 y=278 的图像部分，但图像只有 275 像素高。 IE 和 Edge 似乎不喜欢这样并决定抛出错误。如果我将上面代码片段中的 278 更改为 275，它会起作用:

var image = document.getElementById("myImage");
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.drawImage(image, 1, 0, 499, 275, 0, 0, 749, 417);

img {
  width: 300px;
  height: 200px;
}

<img id="myImage" src="https://image.ibb.co/bsANfm/emptyphoto.png" />

<canvas id="myCanvas" width="600" height="400"></canvas>