0
404
Views¿Por qué hay una ligera diferencia entre la composición de una imagen (formato png) después de mostrarla usando drawImage?
En el siguiente código, el archivo "img" es una imagen creada con Gimp.
Contiene un píxel de color:
rgba=176 99 234 167.
Cuando lo muestro en un contexto y luego recupero su composición
con getImageData, hay una pequeña diferencia en los valores RGBA... ¿por qué?
GetImageData => 177,99,235,167
El navegador es Firefox versión 101
var canvas = document.createElement('canvas'); canvas.height = 1; canvas.width = 1; var img = new Image(); img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TtSIVUSuIOGSoThZEizhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIj14Lgf7+497t4BQq3EVLNjElA1y0hEI2I6syr6XtGFfgxhAGGJmXosuZhC2/F1Dw9f70I8q/25P0evkjUZ4BGJ55huWMQbxDObls55nzjACpJCfE48YdAFiR+5Lrv8xjnvsMAzA0YqMU8cIBbzLSy3MCsYKnGYOKioGuULaZcVzluc1VKFNe7JX+jPaitJrtMcRRRLiCEOETIqKKIECyFaNVJMJGg/0sY/4vjj5JLJVQQjxwLKUCE5fvA/+N2tmZuecpP8EaDzxbY/xgDfLlCv2vb3sW3XTwDvM3ClNf3lGjD7SXq1qQWPgL5t4OK6qcl7wOUOMPykS4bkSF6aQi4HvJ/RN2WAwVugZ83trbGP0wcgRV0t3wAHh8B4nrLX27y7u7W3f880+vsBq/ZyvpKWOQAAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAHdElNRQfmBhIJOxEgSszOAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAABBJREFUCB0BBQD6/wCwY+qnBmkCpSTSg9wAAAAASUVORK5CYII="; // rgba = 176 99 234 167 img.onload = function() { var context = canvas.getContext('2d'); context.drawImage(img, 0, 0, 1, 1); var imgData = context.getImageData(0, 0, 1, 1); console.log(imgData); console.log("this is not 176 99 234 167"); } actualizado el 20 de junio: Mi salida con Firefox:
actualizado el 19 de junio: tal vez la explicación del problema esté en este enlace.
https://html.spec.whatwg.org/multipage/canvas.html
NOTA Debido a la naturaleza con pérdidas de la conversión entre espacios de color y la conversión hacia y desde valores de color alfa premultiplicados, los píxeles que se acaban de configurar con putImageData() y que no son completamente opacos, pueden devolverse a un getImageData() equivalente como valores diferentes .
1 answers
Answer question0
En la práctica, parece que no puede asumir que el color que lee tiene los mismos valores RGB que el PNG original. Algunos navegadores parecen mantenerlo (Chrome), mientras que otros no necesariamente lo hacen (Firefox).
Parece que se debe a las conversiones de espacio de color (sRGB). Ver, por ejemplo, esta discusión: https://bugzilla.mozilla.org/show_bug.cgi?id=867594
En Firefox, obtengo (164, 102, 225, 167) , que es diferente tanto de los valores originales como de su salida, por lo que de hecho depende del dispositivo.