Pick A Color From An Image Using Canvas and Javascript

Preview:

Description:

A simple pure javascript solution to select a color and get the Html color code (RGB or HEX) as you click on an image, similar to the color picker tool in Photoshop. Based on Html5 canvas tag which allows you to get the color data from a given image and apply the RGB or HEX color to any Html elements. Created by nakome.

How to use it:

Make sure to convert your image into Base64 string format and the insert it into your document.

<div class="thumbnail">
  <div class="preview"></div>
  <img alt="" src="BASE64 IMAGE">
</div>

Create a canvas element in your document.

<canvas id="cs"></canvas>

Make sure the canvas element is hidden.

#cs{ 
  display:none;
}

Create a container to output the color information.

<div class="result">
  <span>HEX: #22142b</span>
  <span>RGB: rgb(34,20,43)</span> 
</div>

The Javascript to enable the color picker and apply the selected color to your document body.

var img = _('.thumbnail img'),
  canvas = _('#cs'),
  result = _('.result'),
  preview = _('.preview'),x = '',y = '';
img.addEventListener('click', function(e){
  if(e.offsetX) {
  x = e.offsetX;
  y = e.offsetY; 
  }
  else if(e.layerX) {
  x = e.layerX;
  y = e.layerY;
  }
  useCanvas(canvas,img,function(){
  var p = canvas.getContext('2d')
  .getImageData(x, y, 1, 1).data;
  result.innerHTML = '<span>HEX: '+rgbToHex(p[0],p[1],p[2])+'</span>'+
   '<span>RGB:  rgb('+
    p[0]+','+
    p[1]+','+
    p[2]+')</span>';
  
  document.body.style.background =rgbToHex(p[0],p[1],p[2]);
  });
},false);
img.addEventListener('mousemove', function(e){
  if(e.offsetX) {
  x = e.offsetX;
  y = e.offsetY; 
  }
  else if(e.layerX) {
  x = e.layerX;
  y = e.layerY;
  }
  
  useCanvas(canvas,img,function(){
  
  var p = canvas.getContext('2d')
  .getImageData(x, y, 1, 1).data;
  preview.style.background = rgbToHex(p[0],p[1],p[2]);
  });
},false);
function useCanvas(el,image,callback){
  el.width = image.width;
  el.height = image.height; 
  el.getContext('2d')
  .drawImage(image, 0, 0, image.width, image.height);
  return callback();
}
function _(el){
  return document.querySelector(el);
};
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function findPos(obj) {
  var curleft = 0, curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return { x: curleft, y: curtop };
  }
  return undefined;
}