javascript - 使用 html5 canvas 混合两个图像

Question

我需要在彼此之上绘制同一图像的 2 个变体，其 alpha 值加起来为 1。

例如:
- imageA 的 alpha 为 0.4，而 imageB 的 alpha 为 0.6。
- 期望的结果是完全不透明的图像(每个像素的 alpha 为 1.0)，显示为 imageB 的 60% 混合和 的 40% 混合>图像A。

但是，我相信 html5 canvas 默认使用混合模式而不是添加 alpha 混合图像，所以用低于 1 的 alpha 绘制的两个东西不会加起来为 1。
我已经尝试了所有不同的合成模式，以及 Adob​​e 混合模式，但都没有达到预期的效果。
一个简单的测试用例是绘制一个洋红色矩形两次，两次的 alpha 均为 0.5。我希望生成的像素为 rgb(255, 0, 255)。但是，结果略微透明。

有人知道实现这个结果的方法吗？

Answer 1

• 如果您查看有关默认混合模式(“source-over”)的 Canvas 的 context2D 规范:

http://dev.w3.org/fxtf/compositing-1/#simplealphacompositing

您会看到使用的公式是(为清楚起见，我重命名了变量):

colorOut = prevColor x prevAlpha + newColor x newAlpha x (1 - prevAlpha)

对于生成的 alpha :

αlphaOut = prevAlpha + newAlpha x (1 - prevAlpha)

请注意，
a) 出乎意料的是，公式不是线性的(由于:newAlpha x (1 - prevAlpha) factor)。
b) 一个点具有和较小的 r、g、b 值和减少的 alpha。所以当重新使用它时，它将为最终图像贡献 square(0.6)==0.36。 (...完全违反直觉...)

• 那么您的 60%/40% 抽奖会发生什么？

1) 图像 A 是用 alpha = 60% 绘制的。上面的公式给出:

 colorOut = color_A * 0.6 ;
 alphaOut = 0.6 ;

2) 图像 B 以 alpha = 40% 绘制

 colorOut = color_A * 0.6 * 0.6 + color_B x 0.4 x (0.4);
 alphaOut = 0.6 + 0.4 * 0.4;

所以最终的公式是==>

 colorOut = 0.36 * color_A + 0.16 * color_B ;
 alphaOut = 0.76 ;

您看，这根本不是您预期的 60/40 组合。

• 如何修复？

1) 您可以使用 getImageData/putImageData 手动完成。请注意跨源问题:如果您的图片不是来自您的域，则它们的 imageData 将为空。对于性能，与完成这项工作的 Canvas (= GPU)相比，押注 50+ 减速因子。根据图像大小/计算能力/浏览器，“实时”(=60fps)可能无法实现。但是你有完全的控制权。

2) 但是如果你现在看看'ligther'复合模式，似乎我们有我们的人:

http://dev.w3.org/fxtf/compositing-1/#porterduffcompositingoperators_plus

公式现在是:

colorOut = prevColor x prevAlpha + newColor x newAlpha 

对于生成的 alpha :

 αlphaOut = prevAlpha + newAlpha 

您会看到这是一个简单的“加号”运算符，非常适合您的要求。
所以解决方案是:
- 保存 ctx。
- 设置打火机合成模式。
- 以 60% alpha 绘制第一张图像。
- 以 40% alpha 绘制第二张图像。
- 恢复 ctx。

最后的话:如果你想检查最终的 alpha 是否正确(==255)，使用那种函数:

 function logAlpha(ctx,x,y) {
    var imDt = ctx.getImageData(x,y,1,1).data;
    if (!(imDt[0] || imDt[1] || imDt[2])) console.log('null point. CORS issue ?'); 
    console.log(' point at (' +x+ ',' +y+ ') has an alpha of ' + imDt[3] ) ;
 }