是否有js庫可以從圖像生成調色板？

Question

可能會做類似的事情

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

$(".image").get_colors()

我知道很少有網站可以上傳你的圖片，它會為你生成顏色，但我想要一些東西放在我的網站上

像這樣你可以看到截圖中生成的顏色，並可以按顏色搜索。 我試圖檢查源代碼，但我看不到任何對js庫的引用。

如果可能的話，我需要這個功能來使用js。

編輯：圖像已經在頁面上; 我只需要生成它的顏色，所以我不想要上傳功能。

謝謝。

Answer 1

您可能對這個相關問題以及我對另一個 問題的 回答感興趣。

從圖像中獲取所有顏色很簡單，至少在支持canvas元素的瀏覽器中 - 此處描述了該技術。 你最終得到一個CanvasPixelArray （ 這里描述 ），它本質上是一個像[r,g,b,a,r,g,b,a, ...]這樣的數組[r,g,b,a,r,g,b,a, ...]其中r,g,b,a是表示每個像素的紅色，綠色，藍色和alpha值。

困難的部分是識別或創建一小部分代表性顏色，而不是可能在100x100圖像中的10,000種顏色。 這是一個非常復雜的問題，有許多解決方案（ 概述在這里 ）。 您可以在clusterfck庫和Leptonica Modified Median Cut算法的端口中看到兩種可能算法的Javascript實現。

Answer 2

我寫的只是為了好玩。 它是一個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}] 。

要了解如何使用canvas元素，您可以查看MDN以及開發中的規范以獲取有關像素操作的詳細信息。

編輯：注釋掉我在調試時使用的一行。

Answer 3

你在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]，...]