1

我正在研究涉及使用ImageData. 在MDN 文档的这个页面上，文章说：

由于与预乘 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 ]

这是违反直觉的，以至于我用我的代码解决了 2 天的搜索问题，并且没想到它实际上可以如此奇怪地工作。

所以，这篇文章没有说的是为什么会发生这种情况以及我该如何解决这个问题。我应该怎么做才能确保我的putImageData调用将导致之后返回完全相同的数据getImageData？

在我看到这种方式之前，我一直在使用完全不透明的（每个第 4 个元素是 255 个）画布。这是确保在调用时不会以某种方式修改其余数据的唯一方法putImageData吗？

4

0 回答 0