Question

我想在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内部的rect与目前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/

Answer 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

Answer 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

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

2 个答案: