웹킷 필터 후 요소 배경색 가져 오기

초기 색을 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); 
    }

자바 스크립트

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>';

나는 현재 Div1과 같은 색으로 DIV2의 내부 RECT이 필요합니다.

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

나는 또한 내가 stackoverflow에서 발견 한 HSL 변환기에 RGB를 사용하지만, 색상은 꽤으로 해제했다. 내가 이해가 안된다면, 사과하겠습니다. 나는 이것을 밤새도록 일하려고 노력했다.

누구든지 나를 도울 수 있다면 크게 감사하겠습니다! 예 : http://jsfiddle.net/JfKEL/

출처

2014-07-25 Fabian Buentello

div2 안에 반드시 svg 요소가 필요하거나 배경 이미지가 동일해야합니까? – Stefan

@Stefan 불행히도 예. 나는 물체를 화면에 그려 넣고있다. –

정확하게 필터를 적용한 후에 색상을 얻는 방법을 잘 모르겠지만 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

출처

2014-07-25 13:13:51 Stefan

감사합니다. 이것은 잘 할 것이다! –

당신은 환영합니다. 행운을 빕니다. – Stefan

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 귀하의 SVG 출력은 다음과 같이 될 것입니다

출처

2014-07-25 13:16:03 Pete

웹킷 필터 후 요소 배경색 가져 오기

답변

관련 문제