JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

JavaScript

class SwatchFromImage {

	constructor ( imageURL, numberColorsInSwatch ){
 
  	this.width = 512;
    this.height = 512;
  
  	this.canvas = document.createElement('canvas');
    
    this.canvas.setAttribute('width',this.width);
  	this.canvas.setAttribute('height',this.height);
    
    document.body.appendChild(this.canvas);
    
    this.context = this.canvas.getContext('2d');
    
    this.image = new Image(this.width,this.height);
    
    this.image.src = imageURL;
    

    this.image.addEventListener("load", (e) => {
      this.context.drawImage(this.image, 0, 0, this.width, this.height);
      
      this.mapColors();
      
    });
  
  }
  
  mapColors(){
  
  	let colors = [];
  
  	for(let x=0;x<this.width;x++){
    
    	for(let y=0;y<this.height;y++){
    
        let rgb = this.context.getImageData(x,y,1,1);

        if(typeof(colors[rgb]) == "undefined"){

          colors[rgb] = 1;

        } else {

          colors[rgb]++;

        }
        
      }
    
    }
    
    console.log("FOUND " + colors.length + " DIFFERENT COLORS IN THIS IMAGE!");
  
  
  }
  
  dispose(){
  
  	this.context = null;
  	this.canvas.remove();
    
  }

}







let f = new SwatchFromImage('https://cloud.headwayapp.co/changelogs_images/images/big/000/011/140-9ced22e6261b2644374483137646e1335dac0b48.gif', 5 );