Clicky

Cómo crear un selector de color con HTML5 Canvas

selector color con HTML5 Canvas

La creación de aplicaciones con Canvas es lo último, incluso podemos crear juegos con él, es compatible con todos los principales navegadores de escritorio y móviles lo que hace que sea una solución más viable que el uso de Flash.

En este tutorial vamos a utilizar el elemento Canvas para crear un sencillo selector de color que no requiere ningún tipo Flash, todo lo que necesitas es un editor de texto y un navegador.

Antes de empezar, echa un vistazo a lo que vamos a construir aquí. También puedes descargar los archivos de código fuente aquí. Ten en cuenta que si vas a probar la demo localmente, tendrás que utilizar un navegador distinto de Chrome, el modelo de seguridad de Chrome significa que el script sólo funcionará en línea.

El HTML

Para este ejemplo el código HTML será muy corto, todo lo que necesitamos para que trabaje el selector de color es un elemento canvas y un lugar para mostrar nuestro color seleccionado en RGB y en formato HEX, así que todo lo que necesitamos es lo siguiente:

<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

Dado que vamos a utilizar una imagen de fondo con la paleta de colores hice que en el canvas la anchura y la altura de la imagen y los valores para el color seleccionado aparezcan en las entradas para facilitar la selección.

También debes agregar jQuery a tu página ya que vamos a utilizar algo de código jQuery.

El código JavaScript

Lo primero que tenemos que hacer para que funcione el selector de color es conseguir el canvas y su contexto, todo lo que necesitamos es una línea de código, así:

var canvas = document.getElementById('canvas_picker').getContext('2d');

Ahora que tenemos el elemento canvas y su contexto, podemos empezar por establecer la imagen como fondo de Canvas. Para ello es necesario crear un objeto de imagen y hacer su fuente la URL de la imagen. Cuando se ha cargado esta imagen tenemos que dibujar el canvas:

var img = new Image();
img.src = 'image.jpg';
$(img).load(function(){
  canvas.drawImage(img,0,0);
});

Hasta aquí todo bien, ¿no?

Bueno, esta es la parte donde tenemos que definir lo que sucede cuando se hace clic en algún lugar de la imagen "‹"‹y, si se piensa en ello, primero se tiene que obtener la posición del cursor del usuario en la imagen para ver dónde hizo clic, así:

$('#canvas_picker').click(function(event){
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;

Con estas dos líneas de código se puede ver donde hizo clic el usuario y lo que estamos haciendo es conseguir las coordenadas en las que el usuario hace clic y luego restarlas en el desplazamiento de la imagen. Eso nos dirá donde hizo clic el usuario con relación a la posición de la imagen.

Nuestro siguiente paso es obtener los valores RGB del lugar en que hizo clic el usuario y para ello necesitamos utilizar la función getImageData y fijar las posiciones x e y del clic:

var imgData = canvas.getImageData(x, y, 1, 1).data;
var R = imgData[0];
var G = imgData[1];
var B = imgData[2];

Ahora tenemos estos valores almacenados dentro de las variables R, G y B, pero queremos mostrar esta información al usuario de una forma que pueda leerse fácilmente, por lo que tenemos que crear una variable de RGB que contenga estos tres valores separados por comas y luego presentarlo como el valor de uno de nuestros campos de entrada:

var rgb = R + ',' + G + ',' + B;
  $('#rgb input').val(rgb);
});

Y si lo probamos ahora ya tenemos un selector de color completamente funcional que recupera el valor RGB de cualquier lugar en que se haga clic pero, para hacer esto un poco mejor, podemos añadir una función de Javascripter que convierta los valores RGB en valores hexadecimales, la función es:

function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
  n = parseInt(n,10);
  if (isNaN(n)) return "00";
  n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
}

Ahora que tenemos esta función todo lo que necesitamos hacer finalmente es presentar los valores hexadecimales realizando la función de nuestros valores RBG para que establezca el valor de la entrada con color HEX con un # antes y con la función ya existente. Es muy simple:

// after declaring the RGB variable   
var hex = rgbToHex(R,G,B);
// after setting the RGB value
$('#hex input').val('#' + hex);

El Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Colorpicker demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>

<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

<script type="text/javascript">
    var canvas = document.getElementById('canvas_picker').getContext('2d');

    // create an image object and get it"™s source
    var img = new Image();
    img.src = 'image.jpg';

    // copy the image to the canvas
    $(img).load(function(){
      canvas.drawImage(img,0,0);
    });

    // http://www.javascripter.net/faq/rgbtohex.htm
    function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
    function toHex(n) {
      n = parseInt(n,10);
      if (isNaN(n)) return "00";
      n = Math.max(0,Math.min(n,255));
      return "0123456789ABCDEF".charAt((n-n%16)/16)  + "0123456789ABCDEF".charAt(n%16);
    }
    $('#canvas_picker').click(function(event){
      // getting user coordinates
      var x = event.pageX - this.offsetLeft;
      var y = event.pageY - this.offsetTop;
      // getting image data and RGB values
      var img_data = canvas.getImageData(x, y, 1, 1).data;
      var R = img_data[0];
      var G = img_data[1];
      var B = img_data[2];  var rgb = R + ',' + G + ',' + B;
      // convert RGB to HEX
      var hex = rgbToHex(R,G,B);
      // making the color the value of the input
      $('#rgb input').val(rgb);
      $('#hex input').val('#' + hex);
    });
</script>

</body>
</html>

Conclusión

Espero que con este tutorial te hayas dado cuenta del potencial que existe en la creación de aplicaciones con canvas. Hay algunas aplicaciones mucho más avanzadas, la gente está incluso haciendo juegos con canvas, "‹"‹así que es una cosa a explorar, ya que se pueden crear cosas increíbles con ello.

Jesus_Caceres