3

我正在尝试专门为我自己的页面编写一个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 打印，则表示它有效，如果没有，则表示无效。

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

4

1 回答 1

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画布元素。

于 2012-06-01T22:52:28.350 回答