1

我正在使用 Javascript 将红色图标图像过滤/转换为 RGB 中指定的另一种颜色。更具体地说，我使用 CSS 过滤器色调旋转、亮度和饱和度来将颜色从纯红色转换为我的目标颜色。我的结果适用于许多颜色，但有些颜色无法正确显示。有什么建议么？

您可以在我的代码中看到我尝试了 HSL 和 HSB 计算，结果基本相同。当前代码使用 HSB 运行，我认为它更适合 CSS 过滤器属性。

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV2 {
    position: absolute;
    width: 200px;
    height: 200px;
}
</style>
<script>
function rgbToHsl(r, g, b){
    r /= 256, g /= 255, b /= 256;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = d == 0 ? 0 : d / (1 - Math.abs(2 * l - 1)) ;
        if (d == 0) {
        	h = 0
        } else {
	        switch(max){
    	        case r: h = ((g - b) / d) % 6; break;
        	    case g: h = (b - r) / d + 2; break;
            	case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
    }
    
  	/* testing out HSB instead of HSL = H is the same */
	var br_hsb = max;
    var s_hsb = (max-min)/br_hsb;  

    return [h, s_hsb, br_hsb];    // [h, s, l]; 
}

function setHue(r, g, b){
	hsl = rgbToHsl(r, g, b);
    h_str = Math.round(hsl[0]*360).toString();
    s_str = (Math.round(hsl[1]*1000)/10).toString();
    l_str = (Math.round((hsl[2]+.5)*1000*1)/10).toString();  /* *2 SEEMS TO WORK BETTER FOR HSL */
    styleString = "hue-rotate(" + h_str + "deg) saturate(" + s_str + "%) brightness(" + l_str + "%)";
    document.getElementById("myDIV2").style.filter = styleString;
    document.getElementById('hue').value = h_str;
    document.getElementById('hsl_str').value = styleString; 
}
</script></head>
<body>

<p>Set the RGB for the icon:</p>
R: <input type=text size=3 name=r id=r value=0> 
G: <input type=text size=3 name=g id=g value=255> 
B: <input type=text size=3 name=b id=b value=13> 
<button onclick="setHue(document.getElementById('r').value, document.getElementById('g').value, document.getElementById('b').value)">
set color
</button>
Hue: <input type=text size=5 name=hue id=hue value="">
HSL: <input type=text size=40 name=hsl_str id=hsl_str value="">

<p><hr><p>
<div id="myDIV2" >
  <img src=http://www.clker.com/cliparts/T/m/K/p/d/W/man-icon.svg.med.png
  width=200 height=200>
</div>
</script>

</body>
</html>

适用的颜色包括： 红色：255,0,0 石灰：0,255,0 蓝色：0,0,255 紫色：128,0,128 银色：192,192,192 灰色：128,128,128

但不起作用的颜色包括： 黄色：255,255,0 白色：255,255,255 黑色：0,0,0

欢迎所有建议。

4

0 回答 0