是一个可以从图像中生成调色板的JS库？

Question

suke suke

<img class="image" ... />

$(".image").get_colors()

我知道很少有网站可以上传图像，它会为您生成颜色，但我希望在我的网站上放一些东西。
thisthisthisthisthis

在其中您可以看到屏幕截图产生的颜色，并且可以通过颜色搜索。我试图检查源代码，但看不到对JS库的任何引用。 如果可能的话，我需要此功能与JS一起使用。

Edit：

图像已经在页面上；我只需要生成其颜色，所以我不想要上传功能。 thanks.

您可能对this相关的问题

和我对另一个相关的答案感兴趣。

toget the the toment the tomaign的颜色很简单，至少在支持

canvas元素的浏览器中 - 该技术在此处描述。您最终会以一个CanvasPixelArray

（在此处描述），这本质上是一个像

[r,g,b,a,r,g,b,a, ...]

Answer 1

的数组，其中每个像素的红色，绿色，蓝色和alpha值表示。

困难的部分是识别或创建少量的代表性颜色，而不是可能以100x100图像中的10,000种颜色。这是一个相当复杂的问题，有许多解决方案（这里浏览）。您可以在ClusterFCK库中看到两种可能的算法的JavaScript实现，并在Leptonica修改后的中位数切割算法。 我确实只是为了好玩而写信。这是一个jQuery插件，如果您不使用它，则可以阅读一些指针。如果在呼叫tome the在返回值中设置一个数组以保存错误，则会返回对象数组，这些对象是图像的直方图（每个选定元素的数组中的一个项目）。

get_colors

如果只有一个具有4个像素（2x2）的图像的文档“＃ff0000，＃00ff00，＃0000ff，＃ff0000” 学习如何使用您可以查看

Mdn

和开发的Specs的帆布元素以获取有关像素操作的详细信息。

Edit：评论我在调试时使用的一条线。
    

您在github上看到了这个项目？

http：//lokeshdhakar.com/projects/color-thief/

它是JavaScript解决方案。 （这取决于其他两个库：jQuery，量化。

(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);

ther将返回一个数组，例如：[[NUM，NUM，NUM]，[NUM，NUM，NUM，NUM]，...]

物质颜色实用程序库

Answer 2

它具有从图像中生成主要颜色或调色板的功能。颜色可能不一定是最常见的颜色

；它们适用于

材料3设计系统

，但似乎也给予一般用途的良好结果。

您可以将代码复制到

材料颜色实用程序存储库中所需的语言中的代码，然后提取主要的颜色和配色方案。

请参阅

获得与代码示例的图像

的主要颜色相关的答案。