title: How to quickly find all colors in an image
body: <p>I need to analyze an image to find all colors in a PNG or GIF image. I currently load the image to a canvas, then get the image data, then loop through every pixel and check it against each color in the palette. It takes forever, the browser thinks the script has stopped and it sometimes just crashes. Hoping there is a better way.</p>
  
  <pre><code>        //load file
          var fileReader = new FileReader();
          fileReader.onload = function(e) {
              var img = new Image();
              img.onload = function() {
  
                  //create a new pixel with the images dimentions
                  newPixel(this.width, this.height, []);
  
                  //draw the image onto the canvas
                  context.drawImage(img, 0, 0);
  
                  var colorPalette = [];
                  var imagePixelData = context.getImageData(0,0,this.width, this.height).data;
  
                  console.log(imagePixelData)
                  for (var i = 0; i &lt; imagePixelData.length; i += 4) {
                      var color = rgbToHex(imagePixelData[i],imagePixelData[i + 1],imagePixelData[i + 2]);
                      if (colorPalette.indexOf(color) == -1) {
                          colorPalette.push(color);
  
                          //don't allow more than 256 colors to be added
                          if (colorPalette.length &gt;= settings.maxColorsOnImportedImage) {
                            alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.')
                            break;
                          }
                      }
                  }
  
                  createColorPalette(colorPalette, false);
  
                  //track google event
                  ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/
  
              };
              img.src = e.target.result;
          };
          fileReader.readAsDataURL(this.files[0]);
  </code></pre>