I'm trying to convert an array into a base64 string. And then back again. I've made a simple example with a sample array looking like this: [0, 1, 2, 3, 0, 1, 2, 3]
and converting with .toDataURL()
in canvas. But by some reason, when I read base64 string back and apply it to the canvas it returns a different image data: [0, 0, 0, 3, 0, 0, 0, 3]
.
Why this happens?
Example:
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;