手记

轻量级JavaScript(JS) HSLA颜色选择器

有时候我们需要一个颜色选择器让用户在某个对象上自定义颜色,这里我们实现一个简单的小型的js,交互式的颜色选择器。

实战

  1. 创建一个div块,用于实时观察颜色选择器的交互效果

 <div class="swatch" >
  1. 创建一个可以实时显示当前颜色的块

<h3 class="colorname">hsla color</h3>
  1. 创建HSLA的滑块。

<form>
    <h6>HUE</h6>
    <div class="hue"><input name="hue" type="range" min="1" max="300" value="130"></div>
 
    <h6>SATURATION</h6>
    <div class="satcolor" >
        <div class="sat"><input name="sat" type="range" min="1" max="100" value="100"></div>
    </div>
 
    <h6>LIGHT</h6>
    <div class="light">
        <input name="light" type="range" min="1" max="100" value="55"></div>
 
    <h6>ALPHA</h6>
    <div class="alphaimg2">
        <div class="alpha">
            <input name="alpha" type="range" min="0" max="1" step="0.01" value="1">
        </div>
    </div>
</form>
  1. 给关键的hsla部分添加css样式

.hue {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}
 
.sat {
    background-image: linear-gradient(to right, #494949 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 0%);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}
 
.light {
    background-image: linear-gradient(to right, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}
 
.alpha {
    background-image: linear-gradient(to right, hsla(66, 31%, 94%, 0.18), white);
    border-radius: 3px;
    border-style: solid;
    border-width: thin;
}
监听html中颜色滑动条的事件
const colorChange = () => {
    document.querySelector('.colorname').textContent = getHSL()
    const swatch = document.querySelector('.swatch')
    swatch.style.backgroundColor = getHSL()
    document.querySelector('.satcolor').style.backgroundColor = getHSL()
}
 
let hue = 130    #设置hue的值
let sat = 100    #设置饱和度
let light = 55    #亮度
let alpha = 1    #不透明度
 
    const hueInput = document.querySelector('input[name=hue]')
    hueInput.addEventListener('input', () => {
        hue = hueInput.value
        colorChange()
    })
    const satInput = document.querySelector('input[name=sat]')
    satInput.addEventListener('input', () => {
        sat = satInput.value
        colorChange()
    })
    const lightInput = document.querySelector('input[name=light]')
    lightInput.addEventListener('input', () => {
        light = lightInput.value
        colorChange()
    })
 
    const alphaInput = document.querySelector('input[name=alpha]')
    alphaInput.addEventListener('input', () => {
        alpha = alphaInput.value
        colorChange()
    })

 

  1. 额外的hsl与rgba程序的互相转换

/**
 * 转换hsl为rgb
 * 输入的hsl值区间为[0,1],输出的rgb数组为[0,255]
 *  http://en.wikipedia.org/wiki/HSL_color_spacen
 * @param   {number}  h       The hue
 * @param   {number}  s       The saturation
 * @param   {number}  l       The lightness
 * @return  {Array}           The RGB representation
 */
function hslToRgb(h, s, l){
    var r, g, b;
 
    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        var hue2rgb = function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }
 
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
 
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
 
/**
 * 转换rgb为hsl
 * http://en.wikipedia.org/wiki/HSL_color_space.
 * 输入的 r, g, 和 b 区间为 [0, 255]
 * 返回的 h, s, 和 l 区间为 [0, 1].
 *
 * @param   {number}  r       The red color value
 * @param   {number}  g       The green color value
 * @param   {number}  b       The blue color value
 * @return  {Array}           The HSL representation
 */
function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    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 = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
 
    return [h, s, l];
}

 

  1. 最终效果,本文的程序只包含核心部分..
         那个头发是用来测试的,使用imagefilter对图像进行处理,使用fabricjs库。有兴趣的可以看一下。

 


演示效果图

最后

前端的东西都挺灵活,方案也有很多,感兴趣的可以试一下。这里主要介绍一个简单的js颜色拾取器的实现。

参考

0人推荐
随时随地看视频
慕课网APP