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

我创造了一个小提琴,你有一个现成的画布,有一些形状和颜色,当我们点击它时我们将处理.我不是为你创建一个颜色选择器,只是列出原来的答案,应该作为实现第二部分的手段.

Here’s the fiddle

提取颜色并列出它们的函数如下,我避免复制所有画布绘图的东西,因为它只是作为例子并且不够通用.

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,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]);
}

源代码是this,正如我在代码中所说的那样,你可以轻松地提取alpha通道,如果你需要,但我选择了我能想到的最通用的场景(也是最简单的场景).