0
282
Views¿Cómo puedo obtener el valor de color de píxel de una imagen en javascript?
¿Cómo puedo obtener el valor de color de píxel de una imagen en javascript?
Tengo una imagen como esta: 
Haga clic en la imagen para crear un círculo rojo.
para que se cree un círculo rojo en el bosque, no quiero que se cree el círculo rojo fuera del bosque.
Para esto, quiero comparar el color de fondo y el valor de fondo del círculo rojo creado al hacer clic.
Me pregunto cómo puedo obtener el valor de color de píxel de la imagen en la que se hizo clic.
1 answers
Answer question0
Hay una sección completa sobre especificaciones HTML para la manipulación de imágenes. https://html.spec.whatwg.org/#manipulación de píxeles
Pero concretamente, una posibilidad es usar la función getImageData : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#getting_the_pixel_data_for_a_context
Este artículo me ayudó mucho para este tipo de cosas: https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/
Aquí mi ejemplo de una implementación básica (estoy usando Typescript para hacerlo más simple):
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 }En esta función, debe pasar el contexto de canvas , por ejemplo.