javascript - IE9 对 HTML5 Canvas getImageData() 函数存在问题

Question

由于某种原因，下面的代码将无法工作。它停在带有 getImageData 的行处。 IE9 抛出此错误:SCRIPT5022:DOM 异常:INDEX_SIZE_ERR (1)。有解决方法来解决这个问题吗？不过，它在 Chrome 和 FF 中都适用。

//Select our canvas and context
var canvas = document.getElementById("imageCanvas");
var context = canvas.getContext('2d');
//Select the image from the DOM
var selectedImage = document.getElementById("image");

//Draw the image to the canvas then read in the data
context.drawImage(selectedImage, 0, 0);
var originalLakeImageData = context.getImageData(0,0, width, height);

//Image data is now stored in an array in the form
//originalLakeImageData.data = [r1, g1, b1, a1, r2, g2, b2, a2....]

注意:上面的代码不是我的代码。来源是here 。但是，我的问题与这个例子相同。要查看 IE9 错误，请尝试此 link

Answer 1

刚刚在搜索另一个问题时遇到您的问题。您遇到的问题与 CSS 中的 oldImage 设置为 display: none 有关。这会导致 width 和 height 属性为零。

您应该尝试使用visibility:hidden。 CSS display:none 表示该元素根本不应该显示，而 visibility:hidden 表示该元素存在但只是不可见。这是一个细微的差别，但应该可以使您的示例正常工作。

您还可以使用绝对定位和 z-index 将其他图像“隐藏”在您想要查看的图像后面。