Estoy usando javascript para programar un juego web simple, funciona dibujando el mapa png en un lienzo html donde los colores del mapa están codificados como un objeto del juego (el negro es una pared, el rojo es un pico).
Quería detectar el color del píxel al que se dirige el reproductor, pero el problema es que cada computadora procesa la imagen png de una manera ligeramente diferente según su configuración (al menos eso es lo que entendí).
¿Puedo, en lugar de verificar el color dibujado en el lienzo, obtener el color del píxel de la imagen png real (para que sea el mismo en todas las máquinas)? ¿Tengo que usar datos de píxeles sin procesar? En caso afirmativo, ¿cómo funciona eso?
Además, ¿ esto debería ayudarme? (Traté de entender eso pero no pude)
No estoy seguro de que sea posible hacerlo con javascript, pero tal vez con php o algo más.
Gracias por tu tiempo
Si estás creando un juego, me pregunto por qué estás tratando de detectar el color. ¿Vas a utilizar tu imagen como editor de mapas? La mayoría de los archivos de imagen son lentos, pesados y tienen que pasar por decodificación. Creo que vas a usar el archivo de imagen como un mapa porque es conveniente crearlo, pero creo que es más eficiente usar el objeto vectorial para usar en juegos. Por ejemplo, los archivos SVG son fáciles de crear y puede usarlos por separado de la forma que desee. En lugar de usar un archivo con una extensión conocida, puede crear su propio objeto y editor de objetos por separado.
De todos modos, como dejé un comentario, encontré la biblioteca que necesitas. Es una biblioteca que puede decodificar archivos PNG en el navegador, que lee el binario del archivo PNG y devuelve el resultado del análisis de bytes al objeto. Puede verificar la información de píxeles en el campo de datos y la decodificación lleva una cantidad considerable de tiempo.
import UPNG from "upng-js"; const input = document.getElementById("upload") as HTMLInputElement; input.onchange = async (ev) => { const file = input.files?.[0]; if (!file) return; if (file.type !== "image/png") return; const result = UPNG.decode(await file.arrayBuffer()); console.log(result); }; Puede encontrar estas bibliotecas, ver la estructura binaria PNG e implementarlas usted mismo, pero no las recomiendo porque creo que será una tarea muy agotadora. De todos modos, también es posible leer y escribir archivos a través de Blob y Arraybuffer en el navegador.