Question

可能会发生类似

的事情

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

$(".image").get_colors()

我知道很少有网站可以上传您的图片，它会为您生成颜色，但我想在我的网站上放置一些东西

类似于this的内容，您可以在其中看到屏幕截图中生成的颜色，并可以按颜色进行搜索。我试图检查源代码，但我看不到任何对js库的引用。

如果可能，我需要此功能才能使用js。

修改图像已经在页面上;我只需要生成它的颜色，所以我不想要上传功能。

感谢。

Answer 1

您可能对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实现。

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以及开发中的specs以获取有关像素操作的详细信息。

编辑：注释掉我在调试时使用的一行。

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

是否有js库可以从图像生成调色板？

3 个答案: