Výber farby (color picker) z obrázka v HTML5 Canvas

color-picker

Vytváranie Canvas aplikácií je jedna z nových vecí, ktorá si postupne hľadá svoje miesto u vývojárov webových aplikácií, ktorí by sa radi „odosobnili“ od action scriptu vo Flashi. Pomocou Canvas môžeme vytvárať aj online hry, je to podporovaný vo všetkých hlavných prehliadačoch (v desktopových aj mobilných) a vytvára nové riešenia ako pri použití Flash.

V tomto príklade použijeme Canvas element na vytvorenie jednoduchého výberu farby (color picker), ktorý nevyžaduje žiadny Flash – všetko, čo budeme potrebovať je textový editor a prehliadač.

HTML Color Picker

Pre tento príklad bude HTML veľmi jednoduché – všetko čo potrebujeme, aby nám výber farby fungoval korektne je Canvas element, nejaké miesto (text input), v ktorom budeme zobrazovať vybranú farbu v RGB a v HEX a miesto, kde výslednú farbu zobrazíme:

<canvas width="640" height="274" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>
<div class="divColor">Farba: <div id="showColor"></div></div>

Vzhľadom na to, že použijem obrázok na pozadí ako paletu farieb – prispôsobil som šírku a výšku „plátna“ (canvas) tomuto obrázku a hodnoty pre vybranú farbu sa objavia v INPUT.

Do web stránky ešte vložíme jQuery, pretože budeme používať niektoré veci z jQuery kódu.

JavaScript Color Picker

Prvá vec, ktorú musíme urobiť – je dostať do Canvas jeho obsah: a na to nám bude stačiť jeden riadok kódu:

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

Teraz, keď sme vytvorili Canvas element a jeho obsah, môžeme začať s nastavením obrázku ako pozadie „plátna“. K tomu je potrebné vytvoriť obrazový objekt a priradiť mu zdrojové URL obrázka. Keď tento obrázok načítaný – musíme ho vykresliť do Canvas:

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

Nasleduje časť, kedy musíme definovať, čo sa stane po kliknutí niekam na „plátno“ – t.j. najskôr musíme získať pozíciu kurzora v canvas elemente po kliknutí užívateľa:

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

Naším ďalším krokom je získať RGB hodnoty z miesta, kde používateľ klikol – použijeme funkciu getImageData a priradíme polohu súradníc X a Y pri kliknutí:

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

Teraz máme tieto hodnoty uložené v R, G a B premenných a potrebujeme tieto informácie zobraziť používateľovi spôsobom, aby ich  bolo možné ľahko prečítať. Musíme teda vytvoriť premennú RGB, ktorá drží tieto tri hodnoty oddelené čiarkami a potom ich zobraziť ako hodnotu v jednom z našich vstupných polí INPUT:

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

Ak si v tejto fáze vyskúšate náš script – zistíte, že máte plne funkčný výber farby, ktorý načíta hodnoty RGB kdekoľvek kliknete do plátna canvas. Aby sme to ešte mierne vylepšili – pridáme funkciu Javascripter, ktorá prevádza hodnoty RGB na HEX:

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

Následne už len zobrazíme HEX hodnoty farieb a pridáme im na začiatok mriežku „#“ a do DIV showColor priradíme vybrané pozadie :

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

Celý HTML kód – ako vytvoriť výber farby (color picker) z obrázka v HTML5 je nasledovný:

<!DOCTYPE html>
<html lang="sk">
<head>
	<meta charset="utf-8" />
	<meta name="robots" content="noindex, nofollow">
	<title>Výber farby - Colorpicker</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>

<style>
html, body { 
	margin:0; 
	padding: 0; 
	background: #333; 
	color: #fff; 
}
.container { 
	padding-top: 30px; 
	margin: auto; 
	text-align: center; 
	font-family: Arial, Helvetica, Sans-Serif; 
}
canvas {
	padding: 0 0 20px 0;
}
canvas:hover { 
	cursor: crosshair; 
}
.divColor { 
	padding: 10px; 
}
#showColor { 
	width: 50px; 
	height: 50px; 
	background: #000; 
	margin: auto; 
}
</style>

<div class="container">

<h1>Výber farby: Color Picker</h1>

<canvas width="640" height="274" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>
<div class="divColor">Farba: <div id="showColor"></div></div>

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

	var img = new Image();
	img.src = 'colorpicker.png';

	$(img).load(function(){
	  canvas.drawImage(img,0,0);
	});

	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){
	  // user coordinates
	  var x = event.pageX - this.offsetLeft;
	  var y = event.pageY - this.offsetTop;
	  // 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);
	  $('#showColor').css( "background-color", "#" + hex );
	});
</script>

</div>

</body>
</html>

Prípadne si môžete pozrieť demo Color Picker priamo v prehliadači.