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>

Answer 2

我刚刚遇到了同样的问题，但原因略有不同。我正在使用带有转换的 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 );

这解决了问题。

IE 和 Edge 上 drawImage 的 IndexSizeError

IndexSizeError on drawImage on IE and Edge

html

javascript

canvas

internet-explorer-11

microsoft-edge