Estoy tratando de convertir una matriz en una cadena base64. Y luego de vuelta otra vez. Hice un ejemplo simple con una matriz de muestra que se parece a esto: [0, 1, 2, 3, 0, 1, 2, 3]
y convertí con .toDataURL()
en lienzo. Pero por alguna razón, cuando leo la cadena base64 y la aplico al lienzo, devuelve datos de imagen diferentes : [0, 0, 0, 3, 0, 0, 0, 3]
.
¿Por qué sucede esto?
Ejemplo:
const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const array = new Uint8ClampedArray([0, 1, 2, 3, 0, 1, 2, 3]); const initialImageData = new ImageData(array, 2, 1); ctx.putImageData(initialImageData, 0, 0); const dataURL = canvas.toDataURL(); console.log(dataURL); // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAAXNSR0IArs4c6QAAAA9JREFUGFdjZGBgYGYAAgAAIQAFoFclWQAAAABJRU5ErkJggg== const img = new Image(); img.onload = () => { canvas.width = 2; canvas.height = 1; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, 2, 1); console.log(imageData.data); // [0, 0, 0, 3, 0, 0, 0, 3] } img.src = dataURL;
Parece que te ha pillado este error en la implementación de Canvas
:
Advertencia: debido a la naturaleza con pérdidas de la conversión a valores de color alfa premultiplicados y desde valores de color alfa premultiplicados, es posible que los píxeles que se hayan configurado usando putImageData() se devuelvan a un getImageData() equivalente como valores diferentes .
(énfasis mío)
El Uint8ClampedArray
que pasa está en formato [r, g, b, a]
y el componente Alpha ( a
) es extremadamente importante. En su prueba, proporcionó un Alpha de 3
y parece que el navegador elige "optimizar" los otros píxeles a 0
.
Pruebe un valor de opacidad total de a
y todo funciona bien:
const array = new Uint8ClampedArray([0, 1, 2, 255, 0, 1, 2, 255]); ... console.log(imageData.data); // [0, 1, 2, 255, 0, 1, 2, 255]