Веб-приложение для обработки изображений большого объема Текст научной статьи по специальности «Компьютерные и информационные науки»

http://dx.doi.org/10.35596/1729-7648-2019-124-6-44-49

Оригинальная статья Original paper

УДК 004.452

ВЕБ-ПРИЛОЖЕНИЕ ДЛЯ ОБРАБОТКИ ИЗОБРАЖЕНИЙ БОЛЬШОГО ОБЪЕМА

ВИНИЧУК ОН.

Белорусский государственный университет информатики и радиоэлектроники, Республика Беларусь

Поступила в редакцию 13 декабря 2018

© Белорусский государственный университет информатики и радиоэлектроники, 2019

Аннотация. Разработано веб-приложение, которое позволяет обрабатывать изображения большого объема, затрагивая минимальные временные характеристики. Представлены блок-схемы реализации логики разработанного приложения.

Ключевые слова: обработка изображений, фоторедактор, библиотека EaselJS. Конфликт интересов. Автор заявляет об отсутствии конфликта интересов.

Для цитирования. Виничук О.Н. Веб-приложение для обработки изображений большого объема. Доклады БГУИР. 2019; 6(124): 44-49.

WEB APPLICATION FOR PROCESSING IMAGES OF LARGE SIZE

VINICHUK O.N.

Belarusian State University of Informatics and Radioelectronics, Republic of Belarus

Submitted 13 December 2018

© Belarusian State University of Informatics and Radioelectronics, 2019

Abstract. It was developed the web application allowing to process large-volume images, affecting the minimum temporal characteristics. The flowcharts for implementing of the application logic are presented.

Keywords: image processing, photo editor, EaselJS library.

Conflict of interests. The author declares no conflict of interests.

For citation. Vinichuk O.N. Web application for processing images of large size. Doklady BGUIR. 2019; 6(124): 44-49.

Введение

На сегодняшний день достаточно проблематично выбрать фоторедактор, который позволял бы качественно обрабатывать изображения большого объема. Существуют различные способы установок от десктоп-версий до онлайн версий. Каждые по-своему удобные и одновременно нет. Обработка изображений хорошего качества может затрагивать как временные характеристики, так и память компьютера. Поэтому при разработке данного веб-приложения в первую очередь ставилась задача ускорения процесса обработки изображений хорошего качества, а именно изображений большого объема.

Были выбраны следующие основные технологии, которые использовались при написании веб-редактора: HTML5, CSS3, JavaScript, JQuery, EaselJS.

HTML5, CSS3, JavaScript и библиотека JQuery - базовый набор «инструментов» при создании любого веб-приложения.

Технология HTML5

Технология HTML состоит в обработке управляющих символов, в результате чего получается веб-страница. Язык HTML до 5-й версии определялся как приложение SGML (стандартного общедоступного языка разметки по стандарту ISO 8879). Спецификация HTML5 формулируется в терминах DOM (объектной модели документа) [1].

Язык HTML5 имеет широкую сферу применения и обладает новыми возможностями. Во-первых, упрощенная структура веб-документа, которая реализована посредством появления семантических блоков контента. Во-вторых, новые возможности позволяют сделать код HTML-документа на порядок чище, чем ранее. Ввод данных в HTML5 становится более упрощенным, чем в предыдущих версиях. Посредством HTML5 информацию можно проверить еще до ее опубликования. В более ранних версиях HTML валидацию форм необходимо было реализовывать либо посредством языка программирования JavaScript, либо посредством языка программирования PHP. Функция Canvas, которая также впервые появилась в HTML5, позволяет создавать пользовательские интерфейсы абсолютно на новом уровне.

Еще одним из нововведений HTML5 является возможность размещения анимации непосредственно внутри самого браузера. Предыдущая версия языка для этого требовала установки различных дополнительных программ.

Спецификация CSS3

Стилистическое оформление веб-редактора реализовывалось посредством каскадных таблиц стилей (CSS). Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформления текста, ссылок, изображений и других элементов. С помощью стилей можно определить вид веб-страницы для разных устройств вывода: монитора, принтера, смартфона, планшета и др. На сегодняшний день актуальной версией CSS является версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы.

Язык программирования JavaScript

Все действия пользователя, связанные, например, с нажатием или перетаскиванием элемента реализованы посредством скриптового языка программирования JavaScript и библиотеки JQuery. Одно из ключевых преимуществ JavaScript - это поддержка практически всеми известными и самыми популярными браузерами [1]. С помощью данного скриптового языка доступны к исполнению следующие функции:

- возможность изменения страницы браузеров;

- добавление или удаление тегов;

- изменение стилей страницы;

- размещение информации о действиях пользователя на странице;

- запрос доступа к случайной части исходного кода страницы;

- внесение изменений в код;

- выполнение действия с cookie-файлами.

То есть можно сказать, что основная идея языка JavaScript - создание динамической веб-страницы. JavaScript объединяет объектно-ориентированный и функциональный подходы, что обусловлено высочайшей гибкостью данного языка.

При помощи языка JavaScript веб-страницы становятся более живыми и удобными для пользователей. Но реализовывать все эти эффекты вручную на JavaScript достаточно сложно и требует больших временных затрат. В настоящее время существует множество библиотек, которые позволяют одной строкой кода реализовать такие возможности, на описание которых JavaScript понадобились бы десятки строк. Самой распространенной и удобной среди них является библиотека JQuery, которая представляет собой кроссплатформенную библиотеку, созданную для взаимодействия JavaScript и HTML. При помощи библиотеки JQuery написание кода занимает намного меньше времени, что упрощает реализацию кода и делает его более читабельным. Библиотека JQuery призвана упростить использование JavaScript настолько, насколько это возможно, а также сделать программирование на нем более легким и доступным.

Язык HTML5 делает акцент на упрощении разметки, необходимой для создания соответствующих WSC-стандартам страниц и объединения всего требуемого CSS и JavaScript-кода [2].

Веб-приложение для обработки изображений

Основной функционал, который отвечает за обработку изображений, хранится в библиотеке EaselJS. Библиотека EaselJS была выбрана не случайно, она облегчает работу с элементом Canvas - элементом HTML5, предназначенным для создания растрового двухмерного изображения при помощи JavaScript. Данная библиотека состоит из полного иерархического дисплейного списка, а именно набора векторов, используемых для построения изображения на экране, базовой модели взаимодействия и вспомогательных классов для значительного облегчения работы с Canvas. Работать с библиотекой EaselJS достаточно просто: необходимо определить элемент Canvas в HTML и сослаться на него в JavaScript. EaselJS использует концепцию Stage, которая является Container высшего уровня для дисплейного списка (сценой будет элемент Canvas). На рис. 1 представлена блок-схема, которая поможет подключить и настроить библиотеку EaselJS.

У библиотеки EaselJS имеется класс Graphics, который предоставляет легкий в использовании API (программный интерфейс приложения) для создания инструкций векторного рисунка и прорисовывания их на указанный контекст. Команды очень похожи на те, что используются в обычном Canvas HTML5. Вместе с тем в EaselJs имеются и некоторые собственные команды для работы с Canvas.

В приложении реализованы функции по обработке изображений - фильтры, реализованные посредством класса Filter. Класс Filter - это базовый класс, от которого наследуются свойства всех остальных фильтров. Фильтры применяются к объектам, которые были помещены в кэш компьютера при помощи метода кэширования -cache. Если объект изменяется, необходимо будет поместить данный объект в кэш снова или использовать updateCacheO.Необходимо отметить, что фильтры должны быть применены перед помещением изображения в кэш. EaselJS предоставляет ряд предварительно созданных фильтров. Вышеописанный процесс представлен на рис. 2.

Рис. 1. Подключение библиотеки EaselJS.js Fig. 1. Connecting the EaselJS.js library

Рис. 2. Процесс применения фильтра к изображению Fig. 2. The process of applying a filter to an image

Интерфейс веб-приложения состоит из меню и рабочей области (рис. 3). Справа, при добавлении изображений, отображаются слои (рис. 4). Если на страницу добавлено сразу несколько слоев, для удобства работы реализованы функции:

- переименовать слой;

- скрыть/показать слой;

- удалить слой.

С помощью веб-приложения можно легко настроить цвет, размер, яркость изображения. В меню представлены следующие функции трансформирования и обработки изображения:

- Scale - изменение размера слоя/изображения;

- Rotate - поворот слоя/изображения на 2D-плоскости;

- Skew - искажение слоя/изображения;

- Flip vertically - отражение слоя/изображения по вертикали;

- Flip horizontally - отражение слоя/изображения по горизонтали;

- Brightness - изменение яркости изображения;

- Colorify - окрашивание изображения;

- Blur - размытие изображения;

- Gaussian Blur - Гауссовское размытие;

- Emboss - тиснение;

- Sharpen - резкость.

В разработанном веб-приложении встроены самые необходимые функции и методы.

Рис. 3. Интерфейс веб-приложения Fig. 3. Web application interface

Рис. 4. Отображение слоев Fig. 4. Layers display

Заключение

Разработано оригинальное веб-приложение для редактирования изображений, которое по своим функциональным возможностям сравнимо с Adobe Photoshop и которому по сравнению с аналогами требуется меньше ресурсов. Уменьшение ресурсной

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

Список литературы

1. Флэнаган Д. JavaScript. Подробное руководство. СПб: Символ-Плюс, 2008. 992 с.

2. Прохоренок Н.А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. СПб.: БХВ-Петербург, 2010. 912 с.

References

1. Fljenagan D. JavaScript. Podrobnoe rukovodstvo. SPb: Simvol-Pljus, 2008. 992 s. (in Russ.)

2. Prohorenok, N. A. HTML, JavaScript, PHP i MySQL. Dzhentl'menskij nabor Web-mastera. SPb.: BHV-Peterburg, 2010. 912 s. (in Russ.)

Сведения об авторах

Виничук О.Н., аспирант кафедры информационных радиотехнологий Белорусского государственного университета информатики и радиоэлектроники.

Information about the authors

Vinichuk O.N., PG student of the information radiotechnologies department of Belarussian State University of Informatics and Radioelectronics.

Адрес для корреспонденции

220013, Республика Беларусь,

Минск, ул. П. Бровки, 6,

Белорусский государственный

университет информатики и радиоэлектроники

тел. +375-29-341-04-17;

e-mail: [email protected]

Виничук Ольга Николаевна

Address for correspondence

220013, Republic of Belarus, Minsk, P. Brovka st., 6, Belarusian State University of Informatics and Radioelectronics tel. +375-29-341-04-17; e-mail: [email protected] Vinichuk Olga Nikolaevna