javascript - 将 Canvas 图像数据中的像素更改为 hsl(60, 100%, 50%)

Question

我想将 HTML5 canvas 的像素更改为 hsl 值。它可以是用户选择的任何 hsl 值。

我可以使用 var imageData = canvas.getImageData(0, 0, 200, 200);

获取 Canvas 图像数据

但是 imageData.data 数组包含 rgba 中的值。实际上数组中的每个值都是一个字节 -

数据[0] = r，数据[1] = b，数据[2] = g，数据[3] = a，数据[4] = r，数据[5] = b，数据[ 6] = g, data[7] = a 等

是否有可用于操作 imageData 的 api？一个将原始数据抽象化的 api - data[0] = rgba, data[1] = rgba 等等？

这可能有这样的方法 - data[0].setValueHSL(60, 100%, 50%);

如果此 api 不存在，是否有一个类可以创建/表示 hsl 值并将该值转换为 rgb？

Answer 1

我不确定您是否仍在寻找答案，因为很久以前就有人问过这个问题。但我试图做同样的事情并在 Why doesn't this Javascript RGB to HSL code work? 上遇到了答案，这应该可以解决问题:

function rgbToHsl(r, g, b) {
    r /= 255, g /= 255, b /= 255;

    var max = Math.max(r, g, b);
    var 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 'hsl(' + Math.floor(h * 360) + ',' + Math.floor(s * 100) + '%,' + Math.floor(l * 100) + '%)';

}