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

Posted 2023-02-22

【中文标题】是否有可以从图像生成调色板的 js 库？

【英文标题】：Is there a js library can can generate a color palette from an image?

【发布时间】：2012-01-15 07:22:36

【问题描述】：

可能会做类似的事情

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

$(".image").get_colors()

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

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

如果可能的话，我需要这个功能来使用 js。

编辑： 图像已经在页面上；我只需要生成它的颜色，所以我不想要上传功能。

谢谢。

【问题讨论】：

不不，不上传。只需从页面中的图像中获取颜色

只需在画布元素上绘制图像并自行检查。不知道您对get_colors 的返回有何期望。

以前没有使用过画布（我最近开始看 html5）所以我要试一试 - 你知道任何可能涵盖你正在谈论的效果的资源@Prusse

【参考方案1】：

我写只是为了好玩。它是一个 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，了解有关像素操作的详细信息。

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

【参考方案2】：

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

【讨论】：

这是这个问题的唯一专业答案。谢谢先生！

【参考方案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], ... ]