画布上下文putImageData:由于浏览器优化而导致的数据丢失

时间:2020-02-04 14:33:57

标签: javascript canvas getimagedata putimagedata

我正在研究涉及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时确保不以其他方式修改其余数据的唯一方法吗?

0 个答案:

没有答案