Javascript - 从canvas元素下的图像获取像素数据？

在JavaScript中，您可以使用Canvas API从<canvas>元素下的图像获取像素数据。以下是一个简单的示例，说明如何获取图像的像素数据：

首先，在HTML文件中创建一个<canvas>元素：

<!DOCTYPE html>
<html>
  <head>
   <title>Canvas Example</title>
  </head>
  <body>
   <canvas id="myCanvas" width="200" height="200"></canvas>
   <script src="script.js"></script>
  </body>
</html>

接下来，在script.js文件中，获取<canvas>元素的引用，并绘制一个简单的图像：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

现在，您可以使用getImageData()方法从<canvas>元素下的图像获取像素数据：

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

imageData对象包含一个名为data的属性，该属性是一个Uint8ClampedArray，其中包含图像的像素数据。数组的长度是图像宽度乘以高度乘以4（因为每个像素有4个通道：红、绿、蓝和透明度）。

您可以像这样遍历像素数据：

for (let y = 0; y< canvas.height; y++) {
  for (let x = 0; x< canvas.width; x++) {
    const index = (y * canvas.width + x) * 4;
    const r = imageData.data[index];
    const g = imageData.data[index + 1];
    const b = imageData.data[index + 2];
    const a = imageData.data[index + 3];
    console.log(`Pixel at (${x}, ${y}): R=${r}, G=${g}, B=${b}, A=${a}`);
  }
}

这将输出像素的红、绿、蓝和透明度值。

总结一下，您可以使用Canvas API从<canvas>元素下的图像获取像素数据，并使用getImageData()方法和Uint8ClampedArray遍历像素数据。