如何获取javascript中图像的像素颜色值？

Question

如何获取javascript中图像的像素颜色值？

我有这样的图像：

单击图像以创建一个红色圆圈。

以便在森林中创建一个红色圆圈，我不希望在森林外部创建红色圆圈。

为此，我想比较 backgroundcolor 和通过单击创建的红色圆圈的背景值。

我想知道如何获得点击图像的像素颜色值。

Answer 1

HTML 规范中有一整节用于图像处理。 https://html.spec.whatwg.org/#pixel-manipulation

但具体来说，一种可能性是使用getImageData function： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#getting_the_pixel_data_for_a_context

这篇文章对我这种事情帮助很大： https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

这是我的基本实现示例（我使用 Typescript 来简化它）：

function GetColorPixel(
  context: CanvasRenderingContext2D,
  x: number,
  y: number
): Array<number> {
  const imageData: Uint8ClampedArray = context.getImageData(x, y, 1, 1).data
  const rgbColor: Array<number> = [imageData[0], imageData[1], imageData[2]]
  return rgbColor
}

在这个function中，需要传递canvas的上下文例如