Question

有一项任务：图片的所有点都贴有用户色调（0-360），饱和度（0-100）我们采用初始点变换Lightness（-100-0-100）并转换如下：

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

Answer 1

中间一行是从例如0到255的像素值。

上面一行显示增加50％的亮度。对于输入值0（中间线），它实际上将增加50％，但随着接近最大值（255），该值被缩放以避免值变为＆gt; 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值 -

RGB - HSV

Thatv会为你提供亮度为219,95和100的HSV。

现在你需要做的就是调整亮度，比如50，然后通过hsv2rgb来喂它

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

rgb（rgb.r，rgb.g，rgb.b）现在包含调整亮度的新rgb值。

功能“重新着色”的实现

1 个答案: