Czy biblioteka js może wygenerować paletę kolorów z obrazu?

Question

Coś, co może zrobić coś takiego

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

$(".image").get_colors() 

Wiem, że istnieje kilka stron internetowych, gdzie można przesłać swoje zdjęcie i będzie ona wytwarzać kolor dla ciebie, ale chcę coś umieścić na mojej stronie

Coś this gdzie widać kolory generowane na zrzucie ekranu i można wyszukiwać według kolorów. Próbowałem sprawdzić kod źródłowy, ale nie widziałem żadnego odniesienia do biblioteki js.

Potrzebuję tej funkcji do pracy z js jeśli to możliwe.

EDYCJA: Obraz byłby już na stronie; Po prostu muszę wygenerować jego kolor, więc nie chcę funkcji przesyłania.

Dzięki.

Answer 1

Możesz być zainteresowany this related question i my answer to another one.

Pierwsze wszystkie kolorami z obrazu jest proste, przynajmniej w przeglądarce, która obsługuje elementu canvas - technika jest described here. Kończymy z CanvasPixelArray (described here), który jest w istocie tablicą taką jak [r,g,b,a,r,g,b,a, ...], gdzie r,g,b,a są bajtami wskazującymi wartości czerwonego, zielonego, niebieskiego i alfa każdego piksela.

Najtrudniej jest zidentyfikować lub utworzyć niewielki wybór reprezentatywnych kolorów, a nie 10 000 kolorów, które mogą znajdować się w obrazie 100x100. Jest to dość skomplikowany problem z wieloma rozwiązaniami (overview here). Możesz zobaczyć implementacje JavaScript dwóch możliwych algorytmów w clusterfck library i my port of the Leptonica Modified Median Cut algorithm.

Answer 2

Napisałem tylko dla zabawy. Jest to wtyczka jquery, jeśli jej nie używasz, możesz ją przeczytać na kilka wskazówek. Jeśli wystąpi błąd podczas wywołania get_colors, tablica jest ustawiana w wartości zwracanej, aby pomieścić błędy, zwraca tablicę obiektów, te obiekty są histogramami obrazu (jeden element w tablicy dla każdego wybranego elementu).

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

Jeśli dokument tylko jeden obraz z 4 pikseli (2x2) "# FF0000, # 00FF00, # 0000FF, # ff0000", jeśli nie $('img').get_colors(); zwraca [{"ff0000": 2, "0000ff": 1, "00ff00":1}].

Aby dowiedzieć się, jak korzystać z elementu canvas, można zapoznać się z MDN i specs w rozwoju, aby uzyskać szczegółowe informacje na temat manipulacji pikselami.

Edytuj: skomentował linię, której używałem podczas debugowania.

Answer 3

Czy widziałeś ten projekt na Githubie?

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

Jest to rozwiązanie javascript. (To zależy od dwóch dodatkowych bibliotek: jquery, quantize.js).

var colorThief = new ColorThief(); 
colorThief.getPalette(sourceImage, 8); 
getPalette(sourceImage[, colorCount, quality]) 

, powracające tablicę, tak jak poniżej: [[L. num num] [L. num num ...],]