如何在javascript中获取图像的像素颜色值？我有一个这样的图像：
单击图像以创建一个红色圆圈。这样一个红色的圆圈就在森林里了，我不希望这个红色的圆圈在森林之外。为此，我想比较backgroundcolor和通过单击创建的红色圆圈的背景值。我想知道我怎样才能得到点击图像的像素颜色值。
ttisahbt1#
有一整节是关于图像处理的HTML规范。https://html.spec.whatwg.org/multipage/canvas.html#pixel-manipulation但具体来说，一种可能性是使用getImageData函数：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来简化它）：
getImageData
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 }
在这个函数中，需要传递context of canvas，例如
1条答案
按热度按时间ttisahbt1#
有一整节是关于图像处理的HTML规范。https://html.spec.whatwg.org/multipage/canvas.html#pixel-manipulation
但具体来说，一种可能性是使用
getImageData函数：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来简化它）：
在这个函数中，需要传递context of canvas，例如