使用javascript获取位图的像素

我正试图专门为我自己的页面编写greasemonkey javascript代码。在页面中，有一个id为“条形码”的img

我可以用

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

并从页面中获取图像。 我想要的是，我想要能够在一个数组中获得这个图像中的所有像素

我一直在stackoverflow中四处寻找，并找到了一些方法来做到这一点。我还看了皮克斯的。我对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;

var-imageattributes=document.getElementById（'barcode'）.attributes；
var imageurl=imageattributes.getNamedItem（“src”）.value；
var imageurl2=imageurl.replace（“..”，“http://localhost");
var img=新图像（）；
img.src=imageurl2；
drawImage（img，0,0）；
var imgData=context.getImageData（0，0，canvas.height，canvas.width）；
var pixel=新数组（）；
对于（i=0；i您没有（或没有使用）
元素。您的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('barcode').getContext('2d');

尝试获取图像元素的上下文，但这是不可能的。您只能在画布元素上调用
getContext
。
以什么方式
getImageData
不起作用？它是否抛出错误或返回
null
或其他内容？@apsillers我看不到错误或发生了什么。我刚刚删除了所有内容一行一行地输入和编写代码，检查最后一行是否有效，并在网页上写入内容。当我看到那一行时，它停止了工作。你能做一个
控制台。记录
并在控制台中查看结果吗？结果是什么？是否填充了
imgData.data
？我正在firefox上逐行运行javascript代码web控制台上的行。它停止在行context.drawImage（img，0，0）上工作，因为未定义上下文。我看到应该在某个地方放置var context=document.getElementById（'barcode'）。getContext（'2d'））首先，但这也不起作用。它说getContext不是一个函数。所以我猜这就是我出错的地方？等等，你没有
元素吗？这是整个函数的核心部分。现在写一个答案。这很好：谢谢！尽管我不得不编辑canvas.height和canvas.width到其他一些东西ng，但仍然有效。谢谢。
var context = document.getElementById('barcode').getContext('2d');