用JavaScript获取位图的像素

Question

我想编写一个greasemonkey的javascript代码，专门针对我的页面。在该页面中，有一个带有id“barcode”的img。

我可以使用

var imageattributes = document.getElementById('barcode');

并从页面中获取图像。我的目标是能够将此图像中的所有像素获取到一个数组中。

我在stackoverflow上找到了一些方法，并看到了pixastic。我对stackoverflow上的解决方案有些疑虑。

var imgData = context.getImageData(0, 0, canvas.height, canvas.width);

无论我做什么，它都不起作用。而且 Pixastic 没有显示在哪里可以查看像素信息的选项。他们的文档只涵盖了反转、模糊等已有功能。

我目前的代码是这样的：

var imageattributes = document.getElementById('barcode').attributes;
var imageurl = imageattributes.getNamedItem("src").value;
var imageurl2 = imageurl.replace("..","http://localhost");

var img = new Image();
img.src = imageurl2;
context.drawImage(img, 0, 0);
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var pixel = new Array();
for(i=0;i<canvas.height;i++){
    pixel[i] = new Array();
    for(j=0;j<canvas.width;j++){
        pixel[i][j] = imgData.data[i*canvas.width+j*4];
    }
}
document.getElementById('derp').innerHTML = imageurl;

这段代码的作用是获取图片，提取它的src，将其作为新图像加载，并将像素放入数组中。最后一行只是为了在屏幕上显示代码是否起作用，如果URL打印出来，就意味着代码起作用，否则就不起作用。

有人能帮我解决这个问题吗？谢谢。

- Umut Kaya İlkiz

---

getImageData这个方法有什么问题？它会抛出错误，还是返回null或其他内容？ - apsillers

@apsillers 我看不到错误或发生了什么。我刚刚删除了所有内容，逐行编写代码，检查最后一行是否能够在网页上工作并写入内容。当我到达那一行时，它停止工作了。 - Umut Kaya İlkiz

你能在控制台中使用 console.log 并查看结果吗？结果是什么？imgData.data 是否已填充？ - apsillers

我正在Web控制台上逐行在Firefox上运行JavaScript代码。它在context.drawImage（img，0，0）这一行停止工作，因为未定义context。我在某个地方看到应该首先放置var context = document.getElementById（'barcode'）。getContext（'2d'），但那也不起作用。它说getContext不是一个函数。所以我猜那就是我错了的地方？ - Umut Kaya İlkiz

等一下，你没有<canvas>元素吗？那是整个函数的核心组件。我现在写一个答案。 - apsillers

Answer 1

您没有（或未使用）<canvas>元素。 您的HTML应该类似于：

<img id="barcode" src="whatever.bmp">
<canvas id="mycanvas">
    <div id="fallback">
        You only see this message if your browser doesn't support canvas.
    </div>
<canvas>

而你的函数应该以前缀为：

var context = document.getElementById('mycanvas').getContext('2d');

这样可以使您的代码正常工作。您需要首先获取<canvas>元素的绘图上下文，然后将图片添加到该上下文中，最后从上下文中检索像素数据。

直接回答您上面的评论，该行

var context = document.getElementById('barcode').getContext('2d');

尝试获取图像元素的上下文，但这是不可能的。您只能在画布元素上调用getContext。

- apsillers

---

这个很好地运作了 :D 谢谢！虽然我不得不编辑画布的高度和宽度为其他的东西，但它仍然有效。谢谢。 - Umut Kaya İlkiz