javascript - 如何停止与 canvas imageData 的 alpha 预乘？

Question

有没有办法停止 Canvas 数据的 Alpha channel 的预乘，或者解决方法？

我想生成一个图像(在本例中是一些随机的 rgba 值)并将 Canvas 保存为图像。

在第二步中，我想使用 imageData 将原始图像与生成的图像进行比较，但是由于生成图像中 rgba 像素的 alpha channel 的预乘，这不起作用。

<强> The example

function drawImage(ctx) {
    var img = ctx.createImageData(canvas.width,canvas.height);

        for (var i=img.data.length;i-=4;) {     
                img.data[i] = Math.floor(Math.random() * 255);
                img.data[i+1] = Math.floor(Math.random() * 255);
                img.data[i+2] = Math.floor(Math.random() * 255);
                img.data[i+3] = Math.floor(Math.random() * 255);
        }

        ctx.putImageData(img, 0, 0);
            // our image data we just set
        console.log(img.data);
            // the image data we just placed onto the canvas
        console.log(ctx.getImageData(0,0,canvas.width, canvas.height).data);
}   

在控制台中，您将找到两个 console.log 输出。第一个在预乘之前，第二个在预乘之后。这两个输出不同，有些值相差 3 或更多。仅当涉及部分透明度时才会发生这种情况(Alpha 设置为 255 以外的任何值)。

有没有办法获得相同的输出？关于这个问题有什么想法吗？有什么想法可以创建类似解决此问题的方法吗？

提前谢谢您!

Answer 1

哎呀，就 Canvas 规范而言，这是一个公认的问题。它指出:

Due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putImageData() might be returned to an equivalent getImageData() as different values.

所以这个:

var can = document.createElement('canvas');
var ctx = can.getContext('2d');
can.width = 1;
can.height = 1;
var img = ctx.createImageData(1, 1);
img.data[0] = 40;
img.data[1] = 90;
img.data[2] = 200;
var ALPHAVALUE = 5;
img.data[3] = ALPHAVALUE;
console.log(img.data); 
ctx.putImageData(img, 0, 0);
console.log(ctx.getImageData(0, 0, 1, 1).data); 

输出:

[40, 90, 200, 5]
[51, 102, 204, 5]

在所有浏览器中。

所以这是一个有损操作，没有解决方法，除非他们更改规范以提供不使用预乘的选项。早在 2008 年，WHATWG 邮件列表就对此进行了讨论，他们认为放置/获取图像数据的“往返”/身份并不是规范愿意要求的 promise 。

如果您需要“保存”图像数据，则无法使用 putImageData 保存它并保持相同的保真度。通过将完整 Alpha 数据绘制到临时 Canvas 并使用较小的 globalAlpha 重新绘制到主 Canvas 的解决方法也不起作用。

所以你运气不好。抱歉。

<小时/>

直到今天(2014 年 5 月 12 日)，WHATWG 列表上仍然对此进行讨论:http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2014-May/296792.html