可能会做类似的事情
<img class="image" ... />
$(".image").get_colors()
我知道很少有网站可以上传你的图片，它会为你生成颜色，但我想在我的网站上放一些东西
类似于this 的东西，您可以在其中看到从屏幕截图生成的颜色，并且可以按颜色进行搜索。我试图检查源代码，但看不到对 js 库的任何引用。
如果可能的话，我需要这个功能来使用 js。
编辑： 图像已经在页面上；我只需要生成它的颜色，所以我不想要上传功能。
谢谢。
【问题讨论】：
get_colors 的返回有何期望。
标签： javascript colors styles
我写只是为了好玩。它是一个 jquery 插件，如果你不使用它，你可以阅读它以获得一些指针。如果在调用get_colors 的过程中出现一些错误，则在返回值中设置一个数组来保存错误，它会返回一个对象数组，这些对象是图像的直方图（每个选定元素的数组中的一项)。
(function($, window, document, undefined){
var canvas = document.createElement('canvas');
if (canvas && canvas.getContext){
$.fn.get_colors = function(){
var rv = [];
this.each(function(){
var tagname = this.tagName.toLowerCase();
if ((tagname === 'img') || (tagname === 'canvas') || (tagname === 'video')){
//something bad can happend when drawing the image
try{
var w = this.getAttribute('width');
var h = this.getAttribute('height');
canvas.setAttribute('width', w);
canvas.setAttribute('height', h);
var ctxt = canvas.getContext('2d');
if (ctxt){
ctxt.drawImage(this, 0, 0);
var imagedata = ctxt.getImageData(0, 0, w, h);
var data = imagedata.data;
//log('imagedata.width:'+imagedata.width+' imagedata.height:'+imagedata.height+' w:'+w+' h:'+h);
var obj = {};
var color = '';
var r = 0, g = 0, b = 0, a = 0;
var pix = data.length;
for (pix--; pix > 2; pix-=4){
//a = data[pix - 0];
b = data[pix - 1];
g = data[pix - 2];
r = data[pix - 3];
if (r < 16) r = '0' + r.toString(16);
else r = r.toString(16);
if (g < 16) g = '0' + g.toString(16);
else g = g.toString(16);
if (b < 16) b = '0' + b.toString(16);
else b = b.toString(16);
//if (a < 16) a = '0' + r.toString(16);
//else a = a.toString(16);
//color = r + g + b + a;
color = r + g + b;
if (obj[color] > 0) ++obj[color];
else obj[color] = 1;
}
rv.push(obj);
imagedata = data = obj = null;
}
ctxt = null;
} catch(error){
if (!rv.errors){
rv.errors = [];
}
rv.errors.push(error);
}
}
});
return rv;
};
} else{
$.fn.get_colors = function(){
throw new Error('canvas element support required!');
};
}
})(jQuery, this, this.document);
如果一个文档只有一个 4 像素 (2x2) 的图像“#ff0000, #00ff00, #0000ff, #ff0000”，如果你这样做$('img').get_colors();，它会返回[{"ff0000": 2, "0000ff": 1, "00ff00":1}]。
要了解如何使用画布元素，您可以查看MDN 和开发中的specs，了解有关像素操作的详细信息。
编辑：注释掉我在调试时使用的一行。
【讨论】：
您可能对this related question 和my answer to another one 感兴趣。
从图像中获取所有颜色很简单，至少在支持canvas 元素的浏览器中是这样的——技术是described here。你最终会得到一个CanvasPixelArray (described here)，它本质上是一个类似[r,g,b,a,r,g,b,a, ...] 的数组，其中r,g,b,a 是表示每个像素的红色、绿色、蓝色和alpha 值的字节。
困难的部分是识别或创建一小部分具有代表性的颜色，而不是 100x100 图像中可能存在的 10,000 种颜色。这是一个相当复杂的问题，有很多解决方案 (overview here)。您可以在 clusterfck library 和 my port of the Leptonica Modified Median Cut algorithm 中看到两种可能算法的 Javascript 实现。
【讨论】：
你在 Github 上看过这个项目吗？
http://lokeshdhakar.com/projects/color-thief/
这是一个 javascript 解决方案。 （它依赖于两个额外的库：jquery、quantize.js）。
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])
这将返回一个数组，如下所示：[ [num, num, num], [num, num, num], ... ]
【讨论】：