使用 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 打印，则表示它有效，如果它没有，它没有。

谁能帮我解决这个问题？谢谢。

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。