获取叠加颜色（元素）的rgb

Question

假设我有以下设置

body {
    background: rgba(0,0,0,0.5);
}
#first {
    width: 200px;
    height: 100px;
    background: rgba(255,0,0,0.5);
}
#second {
    width: 50px;
    height: 50px;
    background: rgba(86, 185, 11, .5);
    position: absolute;
    top: 20px;
    left: 20px;
}

如何获取/计算#second div的颜色？

我拍摄了div的截图，并在Photoshop中检查了他们的RGB。

Body                 -> 128,128,128
First red div        -> 192,65,65
Second yellowish div -> 140,125,38

我找到了一种通过实验来计算第一个div的rgb的方法。将两个值一起添加，然后应用alpha。

R: (128 + 255) * 0.5 = 191.5
G: (128 + 0)   * 0.5 = 64
B: (128 + 0)   * 0.5 = 64

尝试在第二个div上使用相同的方法，但现在变得更加棘手。

R: (((128 + 255) * 0.5) + 86)  * 0.5 = 138.5
G: (((128 + 0)   * 0.5) + 185) * 0.5 = 124.5
B: (((128 + 0)   * 0.5) + 11)  * 0.5 = 37.5

我可以围绕G和B来获得确切的结果，但R偏离1.5。如果我增加颜色层的数量，我不知道我会得到什么样的结果。

有更好的计算方法吗？

<小时/> 更新：正如Kaiido建议的那样，我尝试使用画布。使用矩形创建相同的东西：Fiddle。使用getImageData提取第二个rectabgle的rgb。返回值为[122, 105, 6, 223]。不习惯使用8位整数作为alpha值，因此它是[122, 105, 6, 0.8754]。虽然我已经提取了一些rgb值，但它并不是纯色，而且它绝对不是我在Photoshop中测量的140,125,38。

当我拍摄画布的屏幕截图并检查第二个矩形的颜色时，它是139, 124, 37，但#second div的颜色是140,125,38。它们并不完全相同。

无论如何，我搜索了一种方法，将getImageData的{​​{1}}的返回值转换为122, 105, 6, 0.8754。我想如果用下面的例子补偿缺少的不透明度，我会得到所需的值

140,125,38

我为R做了，但是同样的方法对G和B不起作用。我认为画布不会真正有用，除非有办法将透明色转换为纯色。

Answer 1

使用Kaiido的方法，我设法使用画布获得叠加颜色的最终结果。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// default background
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();

// body
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgba(0,0,0,.5)";
context.fill();

// first div
context.beginPath();
context.rect(10, 10, 200, 100);
context.fillStyle = "rgba(255,0,0,0.5)";
context.fill();

// second div
context.beginPath();
context.rect(20, 20, 50, 50);
context.fillStyle = "rgba(86, 185, 11, .5)";
context.fill();

var imageData = context.getImageData(25, 25, 1, 1).data;

console.log(imageData); // 139,124,37

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
canvas {
  display: block;
}

<canvas id="canvas"></canvas>

虽然这给了我想要的东西，但我仍然想用数学方法。