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

假设我有以下设置

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

有更好的计算方法吗

---

更新：正如Kaido所建议的，我尝试使用画布。使用矩形创建了相同的内容：。使用

getImageData

提取第二个矩形的rgb。返回的值是

[122105,6223]

。不习惯使用8位整数作为alpha值，因此它是

[122，105，6，0.8754]

。尽管我提取了一些rgb值，但它不是纯色，也绝对不是我在Photoshop中测量的值，即

140125,38

另外，当我拍摄画布截图并检查第二个矩形的颜色时，它是

139124,37

，但第二个矩形的颜色是

140125,38

。它们并不完全相同

无论如何，我搜索了一种将

getImageData

返回值（即

122105,6,0.8754

转换为

140125,38

的方法。我想如果我用下面的例子来补偿缺少的不透明度，我会得到想要的值

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

---

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

使用Kaido的方法，我成功地获得了使用画布覆盖颜色的最终结果

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//默认背景
context.beginPath（）；
rect（0，0，canvas.width，canvas.height）；
context.fillStyle=“白色”；
context.fill（）；
//身体
context.beginPath（）；
rect（0，0，canvas.width，canvas.height）；
context.fillStyle=“rgba（0,0,0,5）”；
context.fill（）；
//第一组
context.beginPath（）；
rect（10，10，200，100）；
context.fillStyle=“rgba（255,0,0,0.5）”；
context.fill（）；
//第二组
context.beginPath（）；
context.rect（20,20,50,50）；
context.fillStyle=“rgba（8618511.5）”；
context.fill（）；
var imageData=context.getImageData（25,25,1,1）.data；
console.log（imageData）；//139124,37

html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
帆布{
显示：块；
}

---

我想我应该使用画布，绘制相同颜色的矩形，然后使用

getImageData

获取最终值。但是，您必须检查元素覆盖的位置等。也许您也可以尝试一下html2canvas库。@Kaido我尝试了您的方法并提取了一些颜色值，但仍然存在一些问题。请看我的更新。@akinurt，在画布中将透明色转换为纯色的简单方法是在：-）之前将整个画布填充为白色。@kaido Haha。我应用了背景色：白色。画一个白色的矩形很有效。虽然有一个小问题。imageData为第二个矩形返回

[139、124、37、255]

，但第二个div的最终颜色为

140125,38

。你知道为什么画布和div的颜色不一样吗？当然是因为颜色配置不同。另外，如果“最终颜色”是指从PS获得的颜色，您必须知道您处理了3倍的颜色：第一次在CSS中，第二次在快照中，第三次在PS中打开它。如果我直接在CSS上使用系统颜色选择器，然后在快照上，最后在PS中打开的文件上，我一次都没有PS给我的值。另外，我认为做你想做的事情是非常没有效率的，因为我认为不同的设备，将执行不同的算法混合。