13

谢谢大家的回复。我应该更具体地回答我的问题。我查看了许多示例，但这是来自 W3 Schools 的示例（感谢@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;

我查看了一些处理来自各种来源的图像像素数据的示例，并多次尝试获取整个像素数据数组，但未能成功。

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

非常感谢你的帮助。

4

1 回答 1

7

这应该正是您所需要的：

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];
}

我希望这有帮助。

于 2012-12-20T00:20:51.533 回答