将画布imageData中的像素更改为hsl(60、100%、50%）

Changing pixel in canvas imageData to hsl(60, 100%, 50%)

本文关键字：hsl 100% imageData 像素      更新时间：2023-09-26

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

我可以用var imageData = canvas.getImageData(0, 0, 200, 200); 获取画布图像数据

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

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

有没有api可以用来操作imageData？一个api，它将抽象原始数据，以便-data[0] = rgba, data[1] = rgba等？

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

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

我不确定你是否还在寻找答案，因为这是很久以前问过的。但我也在尝试做同样的事情，并在"为什么不"上遇到了答案；这个Javascript RGB到HSL的代码能工作吗？，这应该能奏效：

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) + '%)';
}

你可以写一个像这个一样简单的

parseImageData = function(imageData) {
    var newImageData = [];
    for ( var i = imageData - 1; i>0; i-4) {
        newImageData.push([ imageData[i],
                            imageData[i-1],
                            imageData[i-2],
                            imageData[i-3] ]);
    }
    return newImageData;
}

如果你想把它转换回

parseNewImageData = function ( newImageData ) {
    var imageData = [];
    for ( var i = newImageData - 1; i>=0; --i) {
        imageData.push( imageData[i][0] );
        imageData.push( imageData[i][1] );
        imageData.push( imageData[i][2] );
        imageData.push( imageData[i][3] );
    }
    return imageData;
}

超级简单，你可以让它做你需要的事情！

我希望这能有所帮助！

相关文章：