Информационный портал

Информационно-новостной портал

Новости рекламы и маркетинга. Новости Интернета.
Море полезной информации на сайте RetailDepartment.ru
Поделиться ссылкой с друзьями

Реализуем инструмент для выбора цвета на HTML5 Canvas

Twitter
Нравится
RedLine

В этом уроке мы воспользуемся новым элементом Canvas, который был введён в HTML5, и создадим с его помощью инструмент для выбора цвета.

Заметка: проверить работоспособность данного примера вы можете в любом браузере. Однако, если захотите запустить пример локально, то для пользователей Google Chrome это нужно будет сделать на локальном сервере.

HTML

Для данного примера нам потребуется всего лишь три 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>

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

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

JavaScript

Для реализации выбора цвета нам необходимо извлечь объект элемента canvas и записать в переменную с помощью следующего выражения:

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

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

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;

Данные строки ответственны за отслеживание события “клик”, после чего в переменные x и y записываем координаты курсора пользователя. Координаты считаются путём вычитания смещения элемента 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 хранятся отдельные цвета. Давайте объединим их и выведим в специально подготовленное текстовое поле:

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

На данном этапе наш инструмент уже находится в рабочем состоянии, однако в начале урока мы определились, что помимо RGB, хотим получить HEX значение цвета. Для преобразования RGB значения в 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);
}

Теперь всё что нам осталось сделать, так это записать HEX значение цвета в соответствующее текстовое поле.

// после определения RGB
var hex = rgbToHex(R,G,B);
// после вывода в поле RGB
$('#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');

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

Вывод

Надеюсь, этот маленький пример хоть немного, но показал вам потенциал HTML5 элемента Canvas. На самом деле, с помощью него можно делать игры и интерактивные приложения! Так что изучать данный элемент очень даже стоит.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/dEr5w25wBlU/lessons.php

Add comment

Правила добавления комментариев


Security code
Refresh

Download SocComments v1.3