Question

我正在尝试为我自己的页面编写一个greasemonkey javascript代码。在页面中，有一个id为“条形码”的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，将其作为新图像加载，然后将像素放入数组中。最后一行只是在屏幕上显示代码是否有效，所以如果网址打印，则意味着它有效，如果没有，则不然。

任何人都可以帮我这个吗？谢谢。

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。

使用javascript获取位图的像素

1 个答案: