Реализуем инструмент для выбора цвета на HTML5 Canvas
В этом уроке мы воспользуемся новым элементом 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
"Не пытайтесь перехитрить поисковые машины - надежность и доверие ценятся в сфере поискового маркетинга куда больше." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.