Question

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

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

获取canvas imageData

但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吗？

Answer 1

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

.sitemapfooter {
    display: none;
}

Answer 2

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

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;
}

超级简单，你可以让它专门做你需要的！

我希望这有帮助！

将canvas imageData中的像素更改为hsl（60,100％，50％）

2 个答案: