Выбор цвета на изображении с помощью HTML5 Canvas

13-03-26 root Html, JavaScript Canvas, JavaScript 1

Создание приложений с использованием canvas — это новая возможность HTML5, которая поддерживается современными браузерами. С помощью canvas можно создавать даже игры.

В этом уроке мы будем использовать элемент canvas для создания простого приложения, которое будет определять цвет точки на картинке.

HTML

Разметка для нашего примера очень проста: все, что нам понадобится — это элемент canvas и пара полей для показа цвета пикселя в форматах RGB и 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>

Так как мы используем background изображение для нашей палитры, атрибуты width height элемента canvas будут соответственно равны ширине и высоте изображения.

Так же необходимо подключить к странице jQuery, так как мы будем его использовать дальше.

JavaScript

Первое, что нам надо сделать — получить элемент canvas:

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

Теперь мы можем нарисовать изображение в canvas. Для этого создадим объект Image и в качестве источника укажем нужное изображение. Когда изображение загрузится, мы сможем нарисовать его:

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

Сейчас все готово для того, чтобы определить поведение при нажатии на изображение. Сначала необходимо определить положение курсора в момент нажатия:

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

Этот код определяет координаты нажатия на изображение, учитывая при этом положение canvas.

Следующий шаг — получение RGB значений в точке нажатия. Для этого мы используем функцию getImageData, передавая в нее координаты пикселя:

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

Имея значения в переменных R, G и B, мы можем показать их в соответствующих полях. Для RGB формата:

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

Для перевода RGB в шестнадцатеричный формат будем использовать следующую функцию:

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

Теперь покажем цвет в шестнадцатеричном формате:

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

Полный код

<!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');

	// создание изображения
	var img = new Image();
	img.src = 'image.jpg';

	// копируем изображение в canvas
	$(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){
	  // получение координат
	  var x = event.pageX - this.offsetLeft;
	  var y = event.pageY - this.offsetTop;
	  // получение цвета пикселя
	  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;
	  // конвертируем из RGB в HEX
	  var hex = rgbToHex(R,G,B);
	  // показываем значения
	  $('#rgb input').val(rgb);
	  $('#hex input').val('#' + hex);
	});
</script>

</body>
</html>

Готово!