Есть ли библиотека JS может генерировать цветовую палитру из изображения? - PullRequest
Новая
       12

Есть ли библиотека JS может генерировать цветовую палитру из изображения?

6 голосов
/ 07 декабря 2011

Что-то, что могло бы делать что-то вроде 

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

$(".image").get_colors()

Я знаю, что есть несколько сайтов, где вы можете загрузить свое изображение, и оно будет генерировать цвет для вас, но я хочу что-то разместить на моем сайте

Что-то вроде это , где вы видите цвета, созданные на скриншоте, и можете искать по цветам.Я пытался проверить исходный код, но я не смог увидеть ссылки на библиотеку js.

Мне нужна эта функция для работы с js, если это возможно.

РЕДАКТИРОВАТЬ: Изображение уже будет на странице;Мне просто нужно создать его цвет, поэтому мне не нужны функции загрузки.

Спасибо.

Ответы [ 3 ]

6 голосов
/ 08 декабря 2011

Вас может заинтересовать этот связанный вопрос и мой ответ на другой .

Получение всех цветов изображения просто, по крайней мере в браузере, поддерживающем элемент canvas - метод описан здесь . В итоге вы получите CanvasPixelArray (, описанный здесь ), который по сути является массивом, подобным [r,g,b,a,r,g,b,a, ...], где r,g,b,a - байты, указывающие значения красного, зеленого, синего и альфа каждого пикселя. 1017 *

Сложная часть заключается в определении или создании небольшого набора типичных цветов, а не 10000 цветов, которые могут быть в изображении 100x100. Это довольно сложная проблема со многими решениями ( обзор здесь ). Вы можете увидеть реализации Javascript двух возможных алгоритмов в библиотеке clusterfck и my port алгоритма Leptonica Modified Median Cut .

2 голосов
/ 08 декабря 2011

Я написал просто для удовольствия.Это плагин 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 в разработке для деталей о манипулировании пикселями.

Редактировать: закомментировал строку, которую я использовал при отладке.

1 голос
/ 26 декабря 2013

Вы видели этот проект на 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], ...]

...