我发现某些代码在 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 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage，只有当画布或源矩形的大小为 0 时，我才会收到此错误，但这里的情况并非如此。
任何人都可以阐明我是否在这里做错了什么，或者是否有一些解决方法可用？
我已经找到罪魁祸首了本质上，我一直要求浏览器绘制从 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
