获取叠加颜色(元素)的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。如果我增加颜色层的数量，我不知道我会得到什么样的结果。

有更好的方法来计算吗？

​

更新：正如凯伊多所建议的，我尝试使用画布。使用矩形创建相同的内容：小提琴。使用getImageData提取第二个rectabgle的rgb。返回的值是[122, 105, 6, 223]。不习惯对alpha值使用8位整数，所以它是[122, 105, 6, 0.8754]。尽管我提取了一些rgb值，但它不是一个纯色，也不是我在Photoshop ( 140,125,38 )中测量到的。

​

另外，当我截图画布并检查第二个矩形的颜色时，它是139, 124, 37，但是#second div的颜色是140,125,38。它们不是完全一样的。

无论如何，我搜索了一种将返回的值从getImageData (即122, 105, 6, 0.8754 )转换为140,125,38的方法。我想，如果我用下面的例子来补偿丢失的不透明度，我会得到想要的值

122 * (255/223) = 139.5 // 140
105 * (255/223) = 120   // 125
6   * (255/223) = 6.86  // 38

我对R是这样做的，但是同样的方法不适用于G和B。我开始认为画布不会有真正的帮助，除非有一种方法将透明的颜色转换成一个坚实的颜色。

Answer 1

使用凯伊多的方法，我设法得到了最终结果的叠加颜色使用画布。

​

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>

​

虽然这给了我我想要的东西，但我还是想从数学上解决这个问题。