Javascript IE和边缘上drawImage上的IndexSizeError

我发现某些代码在Internet Explorer和Edge中失败，但在Chrome和Firefox中似乎可以完美地工作：

var image=document.getElementById（“myImage”）；
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
drawImage（图像，1,0499278,0,07499417）
img{
宽度：300px；
高度：200px；
}
我找到了罪犯。基本上，我一直在要求浏览器绘制一段从y=0到y=278的图像，但图像只有275px高。IE和Edge似乎不喜欢这样，决定抛出一个错误。如果我将上面代码段中的278改为275，它可以工作：


var image=document.getElementById（“myImage”）；
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
drawImage（图像，1,0499275,0,07499417）
img{
宽度：300px；
高度：200px；
}
我刚刚遇到了同样的问题，但原因略有不同。我正在使用带有变换的DrawImage来改变它的形状。源图像是1240x1754

canvas_context.transform( -0.035, 0.07, 0, 1, 600 * 1.035, 30 + 600 * 0.07 );
canvas_context.drawImage( source_image, 0, 0, 1240, 1754, 0, 0, 600, 849 );

这在IE中不起作用，它再次因IndexSizeError异常而失败

尽管指定的源区域是源图像的尺寸，但问题似乎是由于浏览器在尝试变换图像时略微超出了源图像的边缘造成的。从边缘向各个方向输入1个像素会将最后一行更改为：

canvas_context.drawImage( source_image, 1, 1, 1238, 1752, 0, 0, 600, 849 );

这就解决了问题