Get average color of image via Javascript

Question

Not sure this is possible  but looking to write a script that would return the average hex or rgb value for an image   I know it can be done in AS but looking to do it in JavaScript

User · Accepted Answer

AFAIK  the only way to do this is with  lt canvas  gt      DEMO V2  http   jsfiddle net xLF38 818   Note  this will only work with images on the same domain and in browsers that support HTML5 canvas   function getAverageRGB imgEl         var blockSize   5     only visit every 5 pixels         defaultRGB    r 0 g 0 b 0      for non-supporting envs         canvas   document createElement  canvas            context   canvas getContext  amp  amp  canvas getContext  2d            data  width  height          i   -4          length          rgb    r 0 g 0 b 0           count   0       if   context            return defaultRGB             height   canvas height   imgEl naturalHeight    imgEl offsetHeight    imgEl height      width   canvas width   imgEl naturalWidth    imgEl offsetWidth    imgEl width       context drawImage imgEl  0  0        try           data   context getImageData 0  0  width  height         catch e               security error  img on diff domain            return defaultRGB             length   data data length       while    i    blockSize   4   lt  length               count          rgb r    data data i           rgb g    data data i 1           rgb b    data data i 2                    used to floor values     rgb r      rgb r count       rgb g      rgb g count       rgb b      rgb b count        return rgb       For IE  check out excanvas

User · Answer

As pointed out in other answers  often what you really want the dominant color as opposed to the average color which tends to be brown  I wrote a script that gets the most common color and posted it on this gist

User · Answer

Less accurate but fastest way to get average color of the image with datauri support   function get average rgb img        var context   document createElement  canvas   getContext  2d        if  typeof img     string             var src   img          img   new Image          img setAttribute  crossOrigin                 img src   src            context imageSmoothingEnabled   true      context drawImage img  0  0  1  1       return context getImageData 1  1  1  1  data slice 0 3

User · Answer

Dominant Color  is tricky  What you want to do is compare the distance between each pixel and every other pixel in color space  Euclidean Distance   and then find the pixel whose color is closest to every other color  That pixel is the dominant color  The average color will usually be mud   I wish I had MathML in here to show you Euclidean Distance  Google it   I have accomplished the above execution in RGB color space using PHP GD here  https   gist github com cf23f8bddb307ad4abd8  This however is very computationally expensive  It will crash your system on large images  and will definitely crash your browser if you try it in the client  I have been working on refactoring my execution to    - store results in a lookup table for future use in the iteration over each pixel    - to divide large images into grids of 20px 20px for localized dominance    - to use the euclidean distance between x1y1 and x1y2 to figure out the distance between x1y1 and x1y3   Please let me know if you make progress on this front  I would be happy to see it  I will do the same   Canvas is definitely the best way to do this in the client  SVG is not  SVG is vector based  After I get the execution down  the next thing I want to do is get this running in the canvas  maybe with a webworker for each pixel s overall distance calculation    Another thing to think about is that RGB is not a good color space for doing this in  because the euclidean distance between colors in RGB space is not very close to the visual distance  A better color space for doing this might be LUV   but I have not found a good library for this  or any algorythims for converting RGB to LUV   An entirely different approach would be to sort your colors in a rainbow  and build a histogram with tolerance to account for varying shades of a color  I have not tried this  because sorting colors in a rainbow is hard  and so are color histograms  I might try this next  Again  let me know if you make any progress here

User · Answer

There is a online tool pickimagecolor com that helps you to find the average or the dominant color of image You just have to upload a image from your computer and then click on the image  It gives the average color in HEX   RGB and HSV  It also find the color shades matching that color to choose from  I have used it multiple times

User · Answer

All-In-One Solution I would personally combine Color Thief along with this modified version of Name that Color to obtain a more-than-sufficient array of dominant color results for images  Example  Consider the following image   You can use the following code to extract image data relating to the dominant color  let color thief   new ColorThief    let sample image   new Image     sample image onload        gt      let result   ntc name       color thief getColor sample image  map x   gt        const hex   x toString 16       return hex length     1    0    hex   hex            join            console log result 0        f0c420       Dominant HEX RGB value of closest match   console log result 1       Moon Yellow   Dominant specific color name of closest match   console log result 2        ffff00       Dominant HEX RGB value of shade of closest match   console log result 3       Yellow        Dominant color name of shade of closest match   console log result 4       false         True if exact color match     sample image crossOrigin    anonymous   sample image src   document getElementById  sample-image   src

User · Answer

First  it can be done without HTML5 Canvas or SVG  Actually  someone just managed to generate client-side PNG files using JavaScript  without canvas or SVG  using the data URI scheme   Second  you might actually not need Canvas  SVG or any of the above at all  If you only need to process images on the client side  without modifying them  all this is not needed    You can get the source address from the img tag on the page  make an XHR request for it - it will most probably come from the browser cache - and process it as a byte stream from Javascript  You will need a good understanding of the image format   The above generator is partially based on libpng sources and might provide a good starting point

User · Answer

Javascript does not have access to an image s individual pixel color data  At least  not maybe until html5     at which point it stands to reason that you ll be able to draw an image to a canvas  and then inspect the canvas  maybe  I ve never done it myself

User · Answer

This is about  Color Quantization  that has several approachs like MMCQ  Modified Median Cut Quantization  or OQ  Octree Quantization   Different approach use K-Means to obtain clusters of colors   I have putted all together here  since I was finding a solution for tvOS where there is a subset of XHTML  that has no  lt canvas  gt  element   Generate the Dominant Colors for an RGB image with XMLHttpRequest

User · Answer

EDIT  Only after posting this  did I realize that  350D s answer does the exact same thing  Surprisingly  this can be done in just 4 lines of code   x000D   x000D  const canvas   document getElementById  canvas      preview   document getElementById  preview      ctx   canvas getContext  2d     canvas width   1  canvas height   1   preview width   400  preview height   400   function getDominantColor imageObject        draw the image to one pixel and let the computer find the dominant color   ctx drawImage imageObject  0  0  1  1        get pixel color   const i   ctx getImageData 0  0  1  1  data     console log  rgba   i 0     i 1     i 2     i 3          console log         1  lt  lt  24     i 0   lt  lt  16     i 1   lt  lt  8    i 2   toString 16  slice 1            vvv all of this is to just get the uploaded image vvv const input   document getElementById  input    input type    file   input accept    image      input onchange   event   gt      const file   event target files 0     const reader   new FileReader       reader onload   readerEvent   gt        const image   new Image        image onload   function             shows preview of uploaded image       preview getContext  2d   drawImage          image          0          0          preview width          preview height                 getDominantColor image              image src   readerEvent target result         reader readAsDataURL file   UTF-8       x000D  canvas     width  200px    height  200px    outline  1px solid  000000    x000D   lt canvas id  preview  gt  lt  canvas gt   lt canvas id  canvas  gt  lt  canvas gt   lt input id  input  type  file    gt  x000D   x000D   x000D   How it works  Create the canvas context const context   document createElement  quot canvas quot   getContext  quot 2d quot     This will draw the image to only one canvas pixel  making the browser find the dominant color for you  context drawImage imageObject  0  0  1  1    After that  just get the image data for the pixel  const i   context getImageData 0  0  1  1  data   Finally  convert to rgba or HEX  const rgba    rgba   i 0     i 1     i 2     i 3       const HEX    quot   quot      1  lt  lt  24     i 0   lt  lt  16     i 1   lt  lt  8    i 2   toString 16  slice 1    There is one problem with this method though  and that is that getImageData will sometimes throw errors Unable to get image data from canvas because the canvas has been tainted by cross-origin data   which is the reason you need to upload images in the demo instead of inputting a URL for example  This method can also be used for pixelating images by increasing the width and height to draw the image  This works on chrome but may not on other browsers

User · Answer

I would say via the HTML canvas tag   You can find here a post by  Georg talking about a small code by the Opera dev        Get the CanvasPixelArray from the given coordinates and dimensions  var imgd   context getImageData x  y  width  height   var pix   imgd data      Loop over each pixel and invert the color  for  var i   0  n   pix length  i  lt  n  i    4        pix i      255 - pix i        red     pix i 1    255 - pix i 1      green     pix i 2    255 - pix i 2      blue        i 3 is alpha  the fourth element        Draw the ImageData at the given  x y  coordinates  context putImageData imgd  x  y     This invert the image by using the R  G and B value of each pixel  You could easily store the RGB values  then round up the Red  Green and Blue arrays  and finally converting them back into an HEX code

User · Answer

Figured I d post a project I recently came across to get dominant color   Color Thief     A script for grabbing the dominant color or a representative color palette from an image  Uses javascript and canvas    The other solutions mentioning and suggesting dominant color never really answer the question in proper context   in javascript    Hopefully this project will help those who want to do just that

User · Answer

I recently came across a jQuery plugin which does what I originally wanted https   github com briangonzalez jquery adaptive-backgrounds js in regards to getting a dominiate color from an image

[javascript] Get average color of image via Javascript

Examples related to javascript

Examples related to image-manipulation