CC BY
142
УДК 004.932.2
ОБРАБОТКА ИЗОБРАЖЕНИЙ С ИСПОЛЬЗОВАНИЕМ ТЕХНОЛОГИИ «HTML5 CANVAS»
Северинов Никита Анатольевич
ассистент кафедры информатики и информационных технологий Московский государственный университет печати имени Ивана Федорова 127550 Россия, г. Москва, ул. Прянишникова, д. 2А to@severinov. info
Аннотация. Рассматриваются методики и алгоритмы обработки изображений: преобразование изображения в оттенки серого, сепия и инвертирование цвета.
Ключевые слова: обработка изображения, фильтры, эффекты, манипуляция с пикселями, ядра, маски, анализ изображения.
Обработка изображений — это семейство определенных методов и задач, где поступающей и результирующей (входной и выходной) информацией являются изображения [4].
Цели обработки изображений:
• улучшение изображения для восприятия человеком (с субъективной точки зрения человека);
• улучшение изображения для восприятия компьютером (для последующего процесса распознавания);
• развлечение (специальные эффекты).
Обработка или анализ цифрового изображения
сводится к анализу функции /(х, y) или двумерной матрицы распределения яркостей.
Для цветного изображения его обработка сводится к анализу функции /(х, y) по каждому цветовому каналу: красный, зеленый и синий, а для монохромного изображения только по «серому» каналу.
В качестве рабочего будем использовать диапазон значений канала [0, 255], при этом значение 0 соответствует при визуализации уровню черного, а значение 255 — уровню белого.
В HTML5 определен элемент canvas как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст — это прямоугольная область на вашей странице, где с помощью языка программирования JavaScript можно рисовать [1]. Canvas предназначен для создания растрового двухмерного изображения.
Одним из наиболее привлекательных свойств canvas является возможность использовать картинки (изображения). Оно может быть применено для реализации динамических фотокомпозиций, для создания фонов графиков и т.п. Также это свойство является единственным способом размещения текста на canvas (в спецификации нет ни одной функции для рисования текста). Внешние изображения могут быть любого формата, поддерживаемого Gecko (т.е. форматы PNG, GIF или JPEG).
Другие элементы canvas на этой же странице также могут быть использованы как источники изображений.
Импортирование картинок
Обычно импортирование картинок происходит в два этапа: сначала нам нужна ссылка на объект JavaScript Image или на другой элемент canvas как источник. Невозможно использовать картинки просто передавая URL/путь до них; потом мы рисуем картинку на canvas, используя функцию drawImage [2].
Преобразование изображения в оттенки серого «grayscale filter»
Для преобразования изображения в оттенки серого необходимо сделать усреднение уровня по каждому каналу, причем значения каждого канала должны быть одинаковые (листинг 1).
for (var i=0;i<channels.length;i+=4) {
var R = channels[i]; var G = channels[i+1]; var B = channels[i+2]; var S = (R+G+B)/3;
channels[i] = channels[i+1] = channels[i+2] = S; }
Листинг 1. Преобразование изображения в оттенки серого
Результат такого преобразования представлен на рис. 1.
Рис. 1. Результат преобразования изображения в оттенки серого «Grayscale filter»
Преобразование изображения в сепия «sepia filter»
Для преобразования изображения в сепия нужно усреднить значения (как при преобразовании в оттенки серого) и добавить сдвиг «e» (листинг 2):
S = (R+G+B) / 3 R' = S + 2*e G' = S + e B' = S
for (var i=0;i<channels.length;i+=4) {
var R = channels[i]; var G = channels[i+1]; var B = channels[i+2]; var S = (R+G+B)/3; var e = 30; channels[i] = S+2*e; channels[i+1] = S+e;
channels[i+2] = S; }
Листинг 2. Преобразование изображения в сепия «Sepiafilter»
Результат преобразования представлен на рис. 2.
Рис. 2. Результат преобразования изображения в сепия «Sepiafilter»
Инвертирования изображения «Negativefüter»
Для инвертирования изображения необходимо каждое значение канала вычесть из максимального значения канала — 255 (листинг 3)
for (var i=0;i<channels.length;i+=4) {
var R = channels[i]; var G = channels[i+1]; var B = channels[i+2];
channels[i] = 255-R; channels[i+1] = 255-G;
channels[i+2] = 255-B; }
Листинг 3. Инвертирование изображения «Negative filter»
Результат инвертирования представлен на рис. 3.
Рис. 3. Результат инвертирования изображения «Negativefilter»
БИБЛИОГРАФИЧЕСКИИ СПИСОК
1. Интернет-ресурс «ШтШоок». [Электронный ресурс]. Режим доступа: http://htmlbook.ru (дата обращения: 22.04.2016).
2. Интернет-ресурс «MozШaDeveloper». [Электронный ресурс]. Режим доступа: http://developer.mozilla.org (дата обращения: 22.04.2016).
3. Попов Д.И. Демидов Д.Г. Программирование на языке высокого уровня Си. — М.: МГУП, 2009. — 280 с.
4. Попов Д.И., Воробьев Е.В. Компьютерная графика. — М.: МГУП, 2014. — 70 с.
IMAGE PROCESSING WITH «HTML5 CANVAS»
TECHNOLOGIES
Nikita Anatolyevich Severinov
Moscow State University of Printing Arts 127550 Russia, Moscow, Pryanishnikova st., 2А
Annotation. In this paper consider image processing methodic sand algorithms: transformation the image into grayscale, sepia and negative filters.
Keywords: image processing, filters, effects, pixel manipulation, cores, masks, image analysis.
