为什么编码为 Base64 的图像数据会使用错误的值解码回来？

Question

我正在尝试将数组转换为 base64 字符串。然后又回来了。我制作了一个简单的示例，其中的示例数组如下所示： [0, 1, 2, 3, 0, 1, 2, 3] 并使用 .toDataURL()< 进行转换/code> 在画布中。但由于某种原因，当我读回 Base64 字符串并将其应用到画布时，它返回不同的图像数据：[0, 0, 0, 3, 0, 0, 0, 3 ]。

为什么会出现这种情况？

例子：

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;

Answer 1

看起来您已经被 这个陷阱所困扰Canvas实现：

警告：由于与预乘 Alpha 颜色值之间的转换存在损耗性质，刚刚使用 putImageData() 设置的像素可能会作为不同值返回到等效的 getImageData()。

（强调我的）

您传入的 Uint8ClampedArray 格式为 [r, g, b, a] ，Alpha (a) 组件为极其重要。在您的测试中，您提供了 3 的 Alpha，浏览器似乎选择将其他像素“优化”为 0。

尝试使用 a 的完全不透明度值，一切正常：

const array = new Uint8ClampedArray([0, 1, 2, 255, 0, 1, 2, 255]);

...

console.log(imageData.data); // [0, 1, 2, 255, 0, 1, 2, 255]