Question

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

＆＃13;

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);

＆＃13;

img {
  width: 300px;
  height: 200px;
}

＆＃13;

<img id="myImage" src="https://image.ibb.co/bsANfm/emptyphoto.png" />

<canvas id="myCanvas" width="600" height="400"></canvas>

＆＃13;

出于某种原因，CanvasRenderingContext2D.drawImage（）调用在IE 11和Edge 40.15063.674.0中失败，我收到了IndexSizeError异常。 According to 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>

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

2 个答案: