在 webkit-filter 之后获取元素背景颜色答案

【问题标题】：Get elements background color after webkit-filter在 webkit-filter 之后获取元素背景颜色
【发布时间】：2014-07-25 12:49:23
【问题描述】：

在初始颜色通过 CSS 上的-webkit-filter 运行后，我试图从屏幕上的元素中获取颜色。将该颜色应用到另一个元素上。

HTML

   <div id="Div1" style="background-color: rgb(166,187,207);"></div>
   <br>
   <div id="Div2"></div>

CSS

  #Div1{
    height: 100px;
    width: 100px;
    -webkit-filter: saturate(5);
  }

Javascript

   var inDiv1 = document.getElementById("Div1");
   var dColorx = inDiv1.style.backgroundColor;

   var inDiv2 = document.getElementById("Div2");
   inDiv2.innerHTML += '<svg width="400" height="110">'+
                       '<rect width="300" height="100" '+
                       'style="fill:'+ dColorx +';'+
                       'stroke-width:3;stroke:rgb(0,0,0)"></svg>';

我需要 Div2 内部的矩形当前与 Div1 的颜色相同。

 Div1 default color rgb(166,187,207).
 Div1 post filter color rgb(94,199,255). <-- need to get this color

我还使用了我在stackoverflow 上找到的 RGB 到 HSL 转换器，但是颜色差了很多。如果我没有道理，我道歉。我整晚都在努力让这个工作。

如果有人可以帮助我，将不胜感激！示例：http://jsfiddle.net/JfKEL/

【问题讨论】：

你绝对需要在 Div2 中添加一个 svg 元素还是只需要背景图像相同。
@Stefan 不幸的是，是的。我正在屏幕上绘制对象。

标签： javascript jquery html css

【解决方案1】：

不确定在完全应用过滤器后如何获得颜色，但您可以为 svg 元素使用相同的颜色并重新应用过滤器。您的 svg 输出将是这样的：

<svg width="400" height="110">
    <filter id="saturate">
        <feColorMatrix in="SourceGraphic" type="saturate" values="5" />
    </filter>
    <g filter="url(#saturate)">
        <rect width="300" height="100" '+ 'style="fill:'+ dColorx + '; stroke-width:3;stroke:rgb(0,0,0)">
    </g>
</svg>

Working jsFiddle

【讨论】：

谢谢！这样就可以了！

【解决方案2】：

借助this post 的功能，您应该能够使用以下方法实现您想要的：

var inDiv1 = document.getElementById("Div1");
var dColorx = inDiv1.style.backgroundColor.replace(/[^0-9$,]/g, '').split(',');

var hsl= rgbToHsl(dColorx[0], dColorx[1], dColorx[2]);
hsl[1] = hsl[1] * 5;
var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ');'

var inDiv2 = document.getElementById("Div2");
inDiv2.innerHTML += '<svg width="400" height="110">' +
    '<rect width="300" height="100" ' +
    'style="fill:' + newColor +
    ';stroke-width:3;stroke:rgb(0,0,0)"></svg>';

Example

【讨论】：