апрель 2019

Веб-додаток для обробки растрових зображень


Жарікова Аліна Ярославівна Жарікова А. Я. , Волинець Н. С.
Химия и современные технологии
Abstract / Full Text

Веб-додаток для обробки растрових зображень / Химия и современные технологии : Метериалы ІХ Международной научно-технической конференции студентов, аспирантов и молодых ученых «Химия и современные технологии», 2019. – C. 13-14


З розвитком обчислювальної техніки почали з’являтись різноманітні графічні редактори зображень, за допомогою яких на фото можна накладати фільтри, які отримуються шляхом обробки кожного пікселя певним алгоритмом.

Обробка зображень – це сімейство певних методів і завдань, де вхід-ною і вихідною інформацією є зображення [1]. 

Цілі обробки зображень:

− поліпшення зображення для сприйняття людиною (з суб’єктивної точки зору людини);

− поліпшення зображення для сприйняття комп’ютером (для подаль-шого процесу розпізнавання);

− розвага (спеціальні ефекти).

Метою роботи було створення веб-орієнтованого редактора зображень, який дозволяє застосувати декілька фільтрів і регулювати яскравість, насиченість і контрастність зображення. Для реалізації завдання було обрано мову програмування JavaScript, технологію HTML5 Canvas, бібліотеки jQuery та CamanJs.

Canvas – елемент HTML5, призначений для створення растрового двомірного зображення за допомогою скриптів. Дозволяє розміщувати на полотні зображення, відео або текст та обробляти їх незалежно від інших елементів сторінки.

До переваг використання Canvas відносяться: можливість маніпу-лювання кожним пікселем, можливість застосування фільтрів обробки зображення, апаратне прискорення.

CamanJS – це поєднання двох назв canvas та manipulation в Javascript. Це комбінація простого у використанні інтерфейсу з просунутими і ефективними методами редагування зображень/полотен  [2].

Дана бібліотека працює у браузері, що значно підвищує зручність користування додатком. Користувач не повинен буде завантажувати додаткове програмне забезпечення для обробки зображення. Все, що потрібно для використання це комп’ютер та браузер із виходом до Інтернету.

Для зручності роботи з веб-додатком вирішено поділити маніпуляції із зображень на ефекти (зміна яскравості, насиченості та контрасту), які можуть регулюватись користувачем та фільтри, які будуть тільки накладатися на зображення.

Розглянемо для прикладу роботу одного з фільтрів та одного з ефектів бібліотеки (рис. 1-2).

Рисунок 1 – Приклад застосування фільтру «greyscale»

Рисунок 2 – Приклад застосування ефекту підвищення яскравості

Реалізована можливість завантаження файлу зображення з локального диску користувача.

Створюється полотно Canvas, на яке завантажується зображення. Після того, як користувач обирає певний фільтр або ефект, відбувається попіксельна обробка зображення.

Зберігання відбувається так само, як і завантаження. При  збереженні обробленого зображення на комп’ютер, до його назви додаватиметься  закінчення –edited.jpg.

Таким чином створена система дозволяє користувачу редагувати зображення в режимі онлайн без завантаження додаткового програмного забезпечення.

References
  1. Попов Д.И., Воробьев Е.В. Компьютерная графика.: Специальный справочник / Е.В. Воробьев, Д.И. Попов – М.: МГУП, 2014. – 70 с.
  2. CamanJS [Електронний ресурс].: Режим доступу: http://camanjs.com – Заголовок з екрану.