6

有没有一种有效的方法来获取当前在 HTML 画布中绘制的颜色列表？

我想正确的术语是当前复合材料的调色板

4

1 回答 1

6

假设您有一个如下所示的 html 文档：

<canvas id="example" width="500" height="300"></canvas>
<ul id="list">
    <h3>Click the canvas to extract colors</h3>
</ul>

我创建了一个小提琴，其中您有一个现成的画布，其中包含一些形状和颜色，当我们单击它时我们将处理它们。我不是为您创建颜色选择器，只是列出原始答案，应该作为实现第二部分的手段。

这是小提琴

提取颜色并列出它们的函数如下，我避免复制所有画布绘图内容，因为它仅用作示例并且不够通用。

var colorList = []; //This will hold all our colors 
function getColors(){
        var canvas      = document.getElementById('example');
        var context     = canvas.getContext('2d');
        var imageWidth  = canvas.width;
        var imageHeight = canvas.height;
        var imageData   = context.getImageData(0, 0, imageWidth, imageHeight);
        var data        = imageData.data;

        // quickly iterate over all pixels
        for(var i = 0, n = data.length; i < n; i += 4) {
           var r  = data[i];
           var g  = data[i + 1];
           var b  = data[i + 2];
           //If you need the alpha value it's data[i + 3]
           var hex = rgb2hex("rgb("+r+","+g+","+b+")");
           if ($.inArray(hex, colorList) == -1){
               $('#list').append("<li>"+hex+"</li>");
               colorList.push(hex);
           }
        }    
}

这将产生一个结果，其中包含一个看似无序的十六进制值列表，这些值表示它们在图像中出现的顺序（因此“看似”），如果您想要一个颜色选择器，但是您可能需要考虑使用colorList.sort();which will order数组变成了黑白的方式。

请注意，我正在使用该rgb2hex函数将返回的值转换为我假设您想要的十六进制格式，如果您对 rgb 没问题，请随意不使用它，函数如下：

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

来源是这个，正如我在代码中的注释所说，如果需要，您也可以轻松提取 alpha 通道，但我选择了我能想到的最通用的场景（也是最简单的场景）。

于 2012-11-06T01:15:16.737 回答