javascript - 功能性“重新着色”的实现

Question

有一个任务：图片的所有点都贴上用户-Hue（0-360），Saturation（0-100） 我们对初始点进行Lightness（-100-0-100）变换，变换如下：

我不明白它是关于什么的？图中显示了什么？如何改变亮度？

Answer 1

中间线是像素值，例如从 0 到 255。

上面的线显示增加了 50% 的亮度。对于 0 的输入值（中间线），它实际上会增加 50%，但是当您接近最大值 (255) 时，会缩放该值以避免值变得 > 255。

底线做同样的事情，但方式相反，减去 50%。在输入值为 0 时，没有变化。只有在最大值时，您实际上才能将亮度降低 50%。

您所指的模型是 HSL（或 HSV）模型。要调整色调、饱和度和亮度，您可以先将 RGB 模型转换为 HSL，然后调整 L 为亮度，然后再转换回来。

我有一个带有调色板的提琴手，在这里使用它：http:
//jsfiddle.net/AbdiasSoftware/wYBEU/

那里有两个函数，rgb2hsv()它们hsv2rgb显示了数学：

该过程将是rgb2hsv -> adjust L -> hsv2rgb（除非您可以直接使用 HSL）。

RGB 转 HSV：

function rgb2hsv() {

    var rr, gg, bb,

    r = arguments[0] / 255,
    g = arguments[1] / 255,
    b = arguments[2] / 255,
    h, s,

    v = Math.max(r, g, b),
    diff = v - Math.min(r, g, b),
    diffc = function (c) {
        return (v - c) / 6 / diff + 0.5;
    };

    if (diff === 0) {
        h = s = 0;

    } else {
        s = diff / v;

        rr = diffc(r);
        gg = diffc(g);
        bb = diffc(b);

        if (r === v) {h = bb - gg}
        else if (g === v) {h = (0.3333333333) + rr - bb} 
        else if (b === v) {h = (0.6666666667) + gg - rr};
        if (h < 0) {h += 1}
        else if (h > 1) {h -= 1}
    }

    return {
        h: h * 360,
        s: s * 100,
        v: v * 100
    }
};

HSV 转 RGB：

function hsv2rgb(h, s, v) {

    h /= 60;
    s *= 0.01;
    v *= 0.01;

    var i = Math.floor(h);
    var f = h - i;
    var m = v * (1 - s);
    var n = v * (1 - s * f);
    var k = v * (1 - s * (1 - f));
    var rgb;

    switch (i) {
        case 0:
            rgb = [v, k, m];
            break;
        case 1:
            rgb = [n, v, m];
            break;
        case 2:
            rgb = [m, v, k];
            break;
        case 3:
            rgb = [m, n, v];
            break;
        case 4:
            rgb = [k, m, v];
            break;
        case 5:
        case 6:
            rgb = [v, m, n];
        break;
    }

    return {
        r: rgb[0] * 255 |0,
        g: rgb[1] * 255 |0,
        b: rgb[2] * 255 |0
    }
}

例子：

假设你有这个 RGB 值 -

Thatv 会给你 HSV 219、95 和 100 的亮度。

您现在需要做的就是将亮度调整为 50 并通过 hsv2rgb 输入

var rgb = hsv2rgb(219, 95, 50);

rgb( rgb.r, rgb.g, rgb.b) 现在包含调整亮度的新 rgb 值。