列出HTML Canvas中的唯一颜色

Question

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

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

Answer 1

假设您有一个类似以下内容的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();将按顺序排列的颜色阵列变成黑白模式。

请注意，我正在使用该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通道，但是我选择了我能想到的最普通（最简单）的方案。