IE和Edge上的drawImage上的IndexSizeError

问题描述

我发现某个代码在Internet Explorer和Edge中失败，但在Chrome和Firefox中似乎完美无缺：

I am finding that a certain code fails in Internet Explorer and Edge, but seems to work flawlessly in Chrome and 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>

出于某种原因，IE 11中的CanvasRenderingContext2D.drawImage（）调用失败和Edge 40.15063.674.0，我得到一个IndexSizeError异常。 ，我应该只是得到这个如果画布或源矩形的大小为0则出错，这不是这里的情况。

For some reason, the CanvasRenderingContext2D.drawImage() call fails in IE 11 and Edge 40.15063.674.0, where I'm getting an IndexSizeError exception. According to MDN, I should only be getting this error if the size of either the canvas or the source rectangle is 0, which is not the case here.

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

Could anyone shed some light into whether I'm doing something wrong here, or if there's some workaround available?

推荐答案

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

I've found the culprit. Essentially, I'd been asking the browser to paint a section of the image from y=0 to y=278, but the image is only 275px high. IE and Edge seem not to like this and decide to throw an error. If I change the 278 in the snippet above to 275, it works:

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>

这篇关于IE和Edge上的drawImage上的IndexSizeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！