- Главная»
- Уроки»
- HTML и DHTML»
- Пипетка для определения цвета на HTML5
- Метки урока:
- html
- javascript
- изображения
- разное
Пипетка для определения цвета на HTML5
Как сделать простой и полезный инструмент для получения цвета с помощью HTML5. Основная идея - выводим изображение в элемент canvas и добавляем обработку событий для движения мыши и нажатия кнопки (для получения цвета).
Разметка HTML
Страница для демонстрации достаточно простая. На ней содержится несколько элементов для представления исходного изображения и параметров цвета выбранной точки.
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Пипетка для установки цвета на HTML5 | Материалы сайта RUSELLER.COM</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <div class="column1"> <canvas id="panel" width="500" height="333"></canvas> </div> <div class="column2"> <div><input type="button" value="Другое изображение" id="swImage" /></div> <div>Цвет:</div> <div id="preview"></div> <div>Параметры:</div> <div>R: <input type="text" id="rVal" /></div> <div>G: <input type="text" id="gVal" /></div> <div>B: <input type="text" id="bVal" /></div> <div>RGB: <input type="text" id="rgbVal" /></div> <div>RGBA: <input type="text" id="rgbaVal" /></div> <div>HEX: <input type="text" id="hexVal" /></div> <hr /> </div> <div style="clear:both;"></div> </div> </body> </html>
CSS
CSS код служит только для формирования внешнего вида страницы и элементов интерфейса.
*{ margin:0; padding:0; } body { background-color:#bababa; color:#fff; font:14px/1.3 Arial,sans-serif; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { color:#000; margin:20px auto; position:relative; width:730px; } .column1 { float:left; width:500px; } .column2 { float:left; padding-left:20px; width:170px; } #panel { border:1px #000 solid; box-shadow:4px 6px 6px #444444; cursor:crosshair; } .column2 > div { margin-bottom:10px; } #swImage { border:1px #000 solid; box-shadow:2px 3px 3px #444444; cursor:pointer; height:25px; line-height:25px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } #swImage:hover { margin-left:2px; } #preview { border:1px #000 solid; box-shadow:2px 3px 3px #444444; height:80px; width:80px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; } .column2 input[type=text] { float:right; width:110px; }
JavaScript
Весь функционал пипетки реализуется в коде JavaScript.
сначала подготавливаем элемент canvas и контекстный объект для него. Затем добавляем обработчики нужных событий. В случае нажатия кнопки мыши получаем параметры текущей точки. С полученными параметрами можно делать все, что угодно.
var canvas; var ctx; var images = [ // Массив используемых изображений 'images/pic1.jpg', 'images/pic2.jpg', 'images/pic3.jpg', 'images/pic4.jpg', 'images/pic5.jpg', 'images/pic6.jpg', 'images/pic7.jpg', 'images/pic8.jpg', 'images/pic9.jpg', 'images/pic10.jpg' ]; var iActiveImage = 0; $(function(){ // Вывводим текущее изображение var image = new Image(); image.onload = function () { ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas } image.src = images[iActiveImage]; // Создаем объект canvas canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); $('#panel').mousemove(function(e) { // Обработчик события mousemove (движение мыши) var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")"; $('#preview').css('backgroundColor', pixelColor); }); $('#panel').click(function(e) { // Обработчик события нажатия на кнопку мыши var canvasOffset = $(canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; $('#rVal').val(pixel[0]); $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]); $('#rgbaVal').val(pixel[0]+','+pixel[1]+','+pixel[2]+','+pixel[3]); var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; $('#hexVal').val( '#' + dColor.toString(16) ); }); $('#swImage').click(function(e) { // Переключение изображений iActiveImage++; if (iActiveImage >= 10) iActiveImage = 0; image.src = images[iActiveImage]; }); });
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/creating-an-html5-canvas-image-color-picker/
Перевел: Сергей Фастунов
Урок создан: 26 Июля 2012
Просмотров: 32294
Правила перепечатки
5 последних уроков рубрики "HTML и DHTML"
-
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
-
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
-
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
-
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
-
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.