javascript - IE9 与 HTML5 Canvas getImageData() 函数有问题

Question

由于某种原因，下面的代码将不起作用。它停在与getImageData。IE9 抛出此错误：SCRIPT5022: DOM Exception: 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....]

注意：上面的代码不是我的代码。来源在这里。但是，我的问题与此示例相同。要查看错误 IE9，请尝试此链接

Answer 1

刚刚在搜索另一个问题时遇到了您的问题。您遇到的问题与您的 CSSoldImage中设置为的事实有关。display: none这会导致widthandheight属性为零。

您应该尝试使用visibility: hidden. CSSdisplay:none意味着该元素根本不应该显示，而是visibility:hidden意味着元素存在但不可见。这是一个细微的差别，但应该使你的例子工作。

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