使用 javascript 获取位图的像素

Get pixels of a bitmap with javascript

本文关键字：像素 位图 获取 javascript 使用      更新时间：2023-09-26

我正在尝试为我自己的页面编写一个 greasemonkey javascript 代码。在页面中，有一个id为"条形码"的img。

我可以使用

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

并从页面获取图像。我想要的是我希望能够在数组中获取此图像中的所有像素。

我一直在堆栈溢出中四处走动，并看到了一些做到这一点的方法。我也看到了像素化。我对堆栈溢出解决方案的问题是

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

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

您没有（或没有使用）<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。

相关文章：