Question

谢谢大家的回复。我应该对我的问题更加具体。我看了一些例子，但是这里是来自W3学校的一个例子（感谢@Pointy指出这不是一个应该依赖的来源 - 没有双关语意图）。

http://www.w3schools.com/tags/canvas_getimagedata.asp

<!DOCTYPE html>
<html>
<body>

  <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">

  <canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
  </canvas>

  <script>
    document.getElementById("scream").onload = function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, c.width, c.height);
    // invert colors
    for (var i = 0; i < imgData.data.length; i += 4) {
        imgData.data[i] = 255 - imgData.data[i];
        imgData.data[i + 1] = 255 - imgData.data[i + 1];
        imgData.data[i + 2] = 255 - imgData.data[i + 2];
        imgData.data[i + 3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
};
  </script>

</body>
</html>

首先，我有点困惑，因为W3 Schools网站上的示例显示图像的像素颜色被反转，但当我将代码复制到Sublime Text 2时，保存并在Chrome中打开它，图像的像素颜色不会反转，图像旁边的图像再次显示完全相同。

我的主要问题是如何在此代码中添加一行以显示图像的整个像素数据？

我在图片下方添加了一个id为“data”的空div，并添加了以下代码，但没有出现整个像素数据：

document.getElementById("data").innerHTML=imgData.data;

我还尝试通过添加以下内容来查看像素数据数组的长度，但它不起作用：

document.getElementById("data").innerHTML=imgData.data.length;

我已经看过几个从各种来源处理图像像素数据的例子，并尝试了多次来获取整个像素数据阵列但却无法做到。

我想查看像素数据数组，以识别图片中的字符或图像，并开始查看图像中特定内容可能出现的图案。

非常感谢你的帮助。

Answer 1

这应该是您所需要的：

http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

以下是如何访问RGBA像素的详细信息：

imageData = context.getImageData(imageX, imageY, imageWidth, imageHeight); // get the image array

//below is how to access to your pixel details 
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

修改您编辑过的问题的答案是：

document.getElementById("data").innerHTML=imgData.data.toString();

或者您可以使用循环迭代数组并每次打印一个元素，如下所示：

for(i=0 ; i< imgData.data.length ; i++){ document.getElementById("data").innerHTML += imgData.data[i]; }

我希望这会有所帮助。

你如何简单地从图像中获取像素数据？

1 个答案: