如何考虑画布混合的alpha通道（不透明度）（context.globalCompositeOperation）

Question

我们有以下示例代码将2张图像与全局合成混合。

画布混合效果很好。但我需要检测公式/算法来使用ImageDatas进行一些操作并获得相同的结果。

    image.src = "Landscape.png";
    image.onload = function() {
        img = new Image;

        img.src = "Gradient.png";
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            context.save();
            context.drawImage(image, 0, 0, canvas.width, canvas.height);
            drawCustomLogo(context);
            var id1 = getContextFromImg(image);
            var id2 = getContextFromImg(img);
            var b = new Blending();
            var sid = b.overlay(id1, id2);
            var bc = document.getElementById('custom');
            bc.width = image.width;
            bc.height = image.height;
            var bctx = bc.getContext('2d');
            bctx.putImageData(sid, 0, 0);
        }

但问题在于处理图像alpha通道。我尝试了以下算法：

    (Target > 0.5)  (1 - (1-2*(Target-0.5)) * (1-Blend)) +
    (Target <= 0.5) ((2*Target) * Blend)

和

dst[px  ] = (dRA<=0.5) ? (2*src[px  ]*dRA/dA) : 255 - (2 - 2*dRA/dA) * (255-src[px  ]);
                dst[px+1] = (dGA<=0.5) ? (2*src[px+1]*dGA/dA) : 255 - (2 - 2*dGA/dA) * (255-src[px+1]);
                dst[px+2] = (dBA<=0.5) ? (2*src[px+2]*dBA/dA) : 255 - (2 - 2*dBA/dA) * (255-src[px+2]);

但结果不同。需要找到严格的叠加混合算法

Answer 1

看起来我找到了正确的决定。 最好的解释存储在W3C

上

所有混合滤镜的通用公式是

color(red) = (1 - alphaBlending)*sourceColor(red) + alphaBlending*func(colorBlending(red),colorSource(red));
....
// continue for other color

因此，混合功能应与合成和混合的通用公式一起使用