我正在研究涉及ImageData
的Paint副本。文章在this page of MDN docs上说:
由于转换为预乘alpha颜色值和从预乘alpha颜色值进行转换的损耗性质,刚使用putImageData()设置的像素可能会以不同的值返回到等效的getImageData()。
并给出这样的例子:
const canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
const context = canvas.getContext("2d");
const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imgData.data;
pixels[0 + 0] = 1;
pixels[0 + 1] = 127;
pixels[0 + 2] = 255;
pixels[0 + 3] = 1;
console.log("before:", pixels);
context.putImageData(imgData, 0, 0);
const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels2 = imgData2.data;
console.log("after:", pixels2);
此示例中的输出为
before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
这是一种违反直觉的方式,我杀死了两天的代码搜索问题,并且还没有想到它实际上可以解决这个问题。
因此,文章没有说的是为什么会发生和我该如何解决。我该怎么做才能确保我的putImageData
调用将导致getImageData
之后返回的数据完全相同?
在我看到这种工作方式之前,我一直在处理完全不透明(每个第4个元素为255个)的画布。
是调用putImageData
时确保不以其他方式修改其余数据的唯一方法吗?