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....]

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

Answer 1

在搜索其他问题时遇到了您的问题。您遇到的问题与CSS中oldImage设置为display: none的事实有关。这会导致width和height属性为零。

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

您还可以使用绝对定位和z-index来“隐藏”您想要看到的其他图像。

IE9的HTML5 Canvas getImageData（）函数存在问题

1 个答案: