Как создать цветовую палитру (color-picker) с помощью HTML5 Canvas

Создание HTML5 «холстовых» (от англ. “сanvas”) приложений, является новым трендом, с их помощью мы даже можем создавать игры, так как они поддерживаются во всех ведущих браузерах ( от настольных до мобильных) и это делает их более эффективным решением, нежели использование умираещего Flash.

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

HTML

В этом примере, код HTML будет очень минимальным – все, что нам нужно для работы цветовой палитры – это канвас элемент и место для того чтобы показать выбранный цвет в 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>

Так как мы будем использовать фоновое изображение с цветовой палитрой, мы сделали ширину и высоту канваса соответствующею размерам изображения – 600×440 пикселей. Мы также должны добавить jQuery на нашу страницу, так как мы будем использовать jQuery код.

JavaScript

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

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

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

var img = new Image();
img.src = 'images/colorpicker.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;

С помощью этих двух строк кода, мы сможем увидеть, где кликал пользователь. Что мы делаем, это получаем все координаты, где пользователь кликал и потом с этого вычитаем смещение канваса. Такое действие покажет нам, где пользователь кликал по сравнению с положением на канвасе.

Нашим следующим шагом будет получение 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 при любом нажатии. Но сделать её немного получше, мы можем добавить функцию из Javascripter, которая преобразует 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 значения, это выполнить функцию с нашим RBG значением, а затем установить значение ввода на HEX цвета с # до и с функцией уже на месте. Это довольно просто:

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

Полностью готовый код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Colorpicker demo</title>
<script src="//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 = 'images/colorpicker.jpg';

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

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

20-03-2016