html画布颜色选择,在HTML画布中列出独特的颜色

的调色板假设你有一个像HTML文档以下内容：

Click the canvas to extract colors

我已经创建了您拥有一个小提琴现成的帆布，有一些形状和颜色，我们将在点击时处理。我不是为你创建一个颜色选择器，只是列出原来的答案，并且应该作为实现第二部分的手段。

提取的颜色的功能的列表他们的下面，我回避复制所有画布绘制的东西，因为它只是作为例子，而不是通用的不够。

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("

"+hex+"");

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通道，如果你需要，但我拍得最通用的方案(最简单的)，我能想到的的。