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

Question

有没有办法停止画布数据的 Alpha 通道的预乘，或者解决方法？

我想生成一个图像（在本例中是一些随机的 rgba 值）并将画布保存为图像。

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

示例

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

天哪，就画布规范而言，这是一个公认的问题。它指出：

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

所以这个：

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 邮件列表就对此进行了讨论，他们认为放置/获取图像数据的“往返”/身份并不是规范愿意要求的承诺。

如果需要“保存”图像数据，则无法使用 putImageData 保存并保持相同的保真度。通过将全 Alpha 数据绘制到临时画布并使用较小的

globalAlpha

重新绘制到主画布的解决方法也不起作用。

所以你运气不好。对不起。

---

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

Answer 2

我找到了一种使用 WebGL 2 读取图像的准确字节值的方法。这与我的问题here相关。看一下下面的代码，它将

getImageData

的结果与预期输出和 WebGL 的输出进行比较：

let image = new Image();

image.addEventListener('load', function () {
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext("2d");
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0, 0);
  let data = ctx.getImageData(0, 0, this.width, this.height).data;
  document.getElementById('imageData').innerHTML = data;
});

image.addEventListener('load', function () {
  let canvas = document.createElement('canvas');
  let gl = canvas.getContext("webgl2");
  gl.activeTexture(gl.TEXTURE0);
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  const framebuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this);
  gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
  let data = new Uint8Array(this.width * this.height * 4);
  gl.readPixels(0, 0, this.width, this.height, gl.RGBA, gl.UNSIGNED_BYTE, data);
  document.getElementById('webGl').innerHTML = data;
});

image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGPg2T3JDgADyAGYmiSbAQAAAABJRU5ErkJggg==";

<pre>Expected:  12,187,146,62<br>
ImageData: <span id="imageData"></span><br>
WebGL:     <span id="webGl"></span><br></pre>

Answer 3

您可以通过将 WebGL 的预乘 alpha 颜色与白色混合来轻松修复它们，如下所示：

        let _w = gl.drawingBufferWidth;
        let _h = gl.drawingBufferHeight;
        let imageData = new ImageData(_w, _h);
        let data = imageData.data;
        gl.readPixels(0, 0, _w, _h, gl.RGBA, gl.UNSIGNED_BYTE, data);

        // Mix WebGL's premultiplied alpha color with white.
        for (let p = 0; p < _w * _h * 4; p += 4) {
            let a = data[p + 3];
            for (let j = 0; j < 4; j++)
                data[p + j] += (255 - a);
        }

Answer 4

好吧，这仍然是一个无赖......

我想如果你在 webgl 的纹理中使用它，你可以将它作为统一的字节数组传递