En algunos navegadores, como Firefox, cuando carga una imagen en una página con FileReader, los colores exactos de los píxeles de la imagen son incorrectos. Esto se debe a un "error" conocido/ignorado con Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1396587

Se carga usando un FileLoader:

 const fileList = this.files; const reader = new FileReader(); reader.onload = function () { img.onload = ()=> { //place image on canvas so we can getImageData let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let img = $(".mapDataPreview"); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); let pixel = ctx.getImageData(0, 0, 1, 1).data; console.log('pixel data', pixel); } img .src = reader.result; }; reader.readAsDataURL(mapDataFile);

Si cargo la imagen usando Chrome, generalmente lee los colores correctamente: los valores RGB que obtengo de getImageData() coinciden con los valores de píxeles reales en el archivo de imagen, si lo abro en un editor de imágenes como Photoshop o Paint.

Si cargo la imagen en Firefox y tiene un perfil de color adjunto (que algún software coloca automáticamente allí), ocasionalmente los colores de los píxeles estarán ligeramente apagados, por ejemplo:

photoshop: #ff0000 | chrome: [255,0,0] | firefox: [254,0,0]

Con frecuencia necesito tomar colores de las imágenes, y esto causa muchos problemas cuando los datos de color que obtengo del navegador no coinciden con la imagen que cargó el usuario.

Hay una especie de solución: si uso pngcrush en la imagen antes de cargarla, muestra los colores adecuados cuando se carga, incluso en Firefox. (Supongo que pngcrush descarta estos perfiles de color)

Desafortunadamente, no puedo usar pngcrush en el navegador, y obligar a las personas a usar Chrome para usar mi sitio web es ridículo.

¿Alguien puede encontrar una solución/truco para evitar este error y obtener los colores de píxeles reales de la imagen que carga un usuario?