js 获取图像的像素信息

可以使用 HTML5 中的 Canvas 对象获取图像的像素信息。以下是一个简单的示例：

// 假设 imgUrl 是一个包含图像的 URL
const imgUrl = "https://example.com/image.png";

// 创建一个 Image 对象
const img = new Image();

// 当图像加载完成后，将其绘制到一个 Canvas 对象上
img.onload = function() {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);

  // 获取 Canvas 对象的像素信息
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixelData = imageData.data;

  // 在这里处理像素信息
};

// 设置 Image 对象的 src 属性以加载图像
img.src = imgUrl;

在这个示例中，我们首先创建了一个 Image 对象，并将其 src 属性设置为包含图像的 URL。然后，当图像加载完成后，我们创建一个 Canvas 对象，并将其绘制到图像上。最后，使用 Canvas 对象的 getImageData 方法获取像素信息，并将其存储在一个 Uint8ClampedArray 数组中。

需要注意的是，由于浏览器的同源策略，如果图像不属于当前域，则必须在服务器端启用 CORS。此外，获取像素信息的操作可能会影响性能，因此最好在处理大型图像时进行优化。