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异常.根据MDN,如果画布或源矩形的大小为0,我应该只得到这个错误,这不是这里的情况.

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

Answer 1

我找到了罪魁祸首.基本上,我一直在要求浏览器绘制从y = 0到y = 278的图像部分,但图像只有275px高.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>