Come creare un selettore di colori con canvas

Il tag canvas di HTML5

by Janeth Kent Date: 11-04-2013

Canvas è un nuovo elemento introdotto nell' HTML5 che permette di generare o modificare elementi grafici (bitmap) con relativa semplicità. L'elemento canvas è basato sulle specifiche WHATWG.

L'elemento canvas fornisce un'area di disegno che può essere sfruttata dagli scripts (tipicamente codice Javascript) per disegnare on the fly grafici, grafica per videogame, immagini; può avere un contesto (context) primario che è il primo contesto ad essere ottenuto per l'elemento; alla creazione canvas non deve avere un contesto primario.

È consigliabile inserire all'interno dell'elemento del contenuto testuale che agisca come descrizione e fallback qualora non fosse possibile mostrare il bitmap.

Canvas prevede due attributi, utilizzati per controllare la dimensione dell'area disponibile (coordinate space):

width: larghezza dell'area di disegno, quando non esplicitata il default è 300px.
height: altezza dell'area di disegno, quando non esplicitata il default è 150px.

Alla creazione del canvas e ad ogni resize successivo (ottenuto tramite modifiche su width e height) il bitmap ed ogni context associato vengono (ri)puliti e (re)inizializzati con le nuove dimensioni indicate.

La sintassi base dell'elemento è la seguente:

Vediamo come si realizza un'applicazione con cavas piuttosto semplice: un selettore di colori.

Il codice HTML

Il codice HTML è molto semplice, tutto ciò che serve è un elemento canvas e un "luogo" per mostrare il nostro colore selezionato in RGB e formato HEX::

<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>

N.B. Ricordatevi di aggiungere la libreria jQuery al vostro codice.

Il codice JavaScript

Affinché l'elemento canvas funzioni, lo richiameremo con la seguente linea di codice:

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

Ora possiamo inserire un'immagine di sfondo, specificando un nuovo oggetto immagine e la sua URL. Successivamente richiameremo il comando per disegnare l'elemento canvas.

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

Perfetto, ora andiamo a definire il comportamento del canvas al clic con il mouse. Per farlo. dobbiamo ottenere la posizione del cursore dell'utente nel canvas stesso:

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

Il passo seguente sará ottenere i valoti RGB del "punto nel quale l'utente ha fatto clic e per questo abbiamo bisogno di utilizzare la funzione getImageData e fissare le posizioni 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];

Ora tali valori sono immagazinati nelle variabili R,G,B, ma non basta. Dobbiamo mostrare tale informazione all'utente in maniera tale che si possa leggere facilemente; pertanto creeremo una variabile di RGB che contenga questi 3 valori separati da una virgola per poi presentarla come un valore di uno dei nostri campi d'entrata:

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

A questo punto il nostro selettore funziona perfettamente. Ma possiamo perfezionarlo.

Tutto ció che dobbiamo fare é aggiungere una funzione di Javascripter che converta i valori RGB in valori esadecimali:

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);
}

Ora, tutto quello che dobbiamo fare è richiamare i valori esadecimali che svolgono la funzione dei nostri valori RBG perchè si possa impostare il valore del colore HEX con un # al principio. Sembra complicato ma non lo è:

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

Il codice completo

<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Colorpicker demotitle>
	<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>

by Janeth Kent Date: 11-04-2013 visite : 4530

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.