Pick A Color From An Image Using Canvas and Javascript

Category: Color , Javascript | September 17, 2014
Author:
Views Total: 2,596
Official Page: Go to website
Last Update: September 17, 2014
License: MIT

Preview:

Pick A Color From An Image Using Canvas and Javascript

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;
}
  • Rene van der Lende

    Hi,

    This week I have been assembling (trying to) code to create a ‘pick color from pixelated image’ app when I came across this demo. I like it a lot but it has a nasty little performance bug:

    As img.addEventListener(‘mousemove’, function(e) {} uses ‘usecanvas()’ it keeps repainting the entire canvas each pixel the mouse moves.

    Just so you know!!

    Cheers