Створення чорно-білого зображення з кольорового

21

Від автора: часто перед веб-майстром постає завдання роботи з зображеннями, зокрема, їх обробка. Наприклад, однією з таких завдань є створення чорно-білого (ЧБ) зображення з наявного кольорового. Нашим сьогоднішнім завданням буде висновок на сторінку ЧБ зображення, при наведенні на яке воно буде ставати кольоровим.

В принципі, немає нічого простіше, ніж підготувати картинку заздалегідь і скористатися технікою спрайтів для зміни картинок однієї на іншу. Але це рішення далеко не завжди нам підійде. Наприклад, ми дозволяємо користувачам нашого сайту завантажувати картинки, до яких і повинен бути застосований потрібний нам ефект. Очевидно, що тут ми вже повинні обробити завантажені зображення на стороні сервера (PHP) або клієнта (JS), щоб на сайт виводилося ЧБ зображення.

Що ж, давайте приступимо до реалізації завдання…

План уроку

1. Реалізація задачі на PHP

2. Реалізація задачі за допомогою jQuery

Деталі підручника

Тема: PHP, jQuery

Складність: Середня

Урок: Відео (.mp4)

Час: 01:03:32

Розмір архіву: 78 Mb

Створення чорно-білого зображення з кольоровогоСтворення чорно-білого зображення з кольорового

1. Реалізація задачі на PHP

Перший спосіб, який ми розглянемо, дозволяє обробляти картинки на стороні сервера. Робити це ми будемо засобами PHP. Відразу варто обмовитися, що для успішної роботи даного способу версія PHP на Вашому сервері повинна стояти версія PHP не нижче 5-ої і має бути бібліотека GD бібліотека для роботи із зображеннями). Як все це перевірити, ми розглянемо нижче.

Отже, для початку створимо на сервері 2 папки, назвемо їх, приміром, «blackwhite» і «color». Перша папка буде зберігати ЧБ зображення, друга — кольорові. Ми тут не будемо розглядати завантаження зображень користувачами на сервер і виведення цих зображень на сайт. Все це Ви можете знайти в наших попередніх уроках, зокрема це урок Завантаження зображень з зміною розміру.

Тепер у файлі скрипта (наприклад, index.php) створимо необхідні для роботи змінні:

]$colorFolder = «color/»; // каталог кольорових картинок
$bwFolder = «blackwhite/»; // каталог ЧБ зображень
$path = $colorFolder . $file; // шлях до файлу кольорової картинки

У коментарях ми вказали, для чого створили кожної з змінних. Зрозуміло, що якщо картинок в папці з кольоровими зображеннями буде більше одного, то змінна $file буде вже масивом, який буде зчитуватися вміст каталогу color, а потім в циклі ми будемо проходити по масиву і обробляти кожне із зображень. Тепер можемо вивести наявні у нас кольорове зображення:

$colorFolder = «color/»;
$bwFolder = «blackwhite/»;
$file = «1.jpg»;
$path = $colorFolder . $file;
echo «Створення чорно-білого зображення з кольорового«;

Поки що, як і належить, виводиться наявне у нас кольорове зображення:

Створення чорно-білого зображення з кольорового

Тепер перейдемо до найцікавішого — до обробки зображень засобами PHP. Проводити цю обробку нам дозволять функції бібліотеки GD. Це своєрідний «Photoshop в PHP», якщо можна так сказати. Давайте перед подальшою роботою перевіримо, чи встановлено на нашому сервері бібліотека GD. Зробити це можна наступним чином:

if(function_exists(‘imagefilter’))
echo ‘OK’;
else echo ‘NOT OK’;

Функція function_exists() перевіряє, визначена конкретна функція і повертає ІСТИНУ, якщо функція підтримується. В даному випадку ми перевірили чи підтримується функція imagefilter(). Якщо функція підтримується, то на екран буде виведено «OK». У тому випадку, якщо функція не визначена, попросіть хостера встановити бібліотеку GD.

Подальша робота буде будуватися на використанні 4-х функцій:

imageCreateFromJPEG() — створення нового зображення з наявного;

imageFilter() — застосування фільтра до зображення;

imagejpeg() — збереження зображення;

imagedestroy() — видалення зображення.

Зауважте, що передбачається робота з картинками формату JPG, а тому використовуються відповідні функції. Есои картинки у форматі GIF, тоді ми повинні використовувати функції imageCreateFromGIF і imageGIF. Отже, ми маємо початкове кольорове зображення, на основі якого нам потрібно створити ЧБ зображення. Перше, що ми зробимо — це створимо нове зображення з наявного. Для цього в якості параметра функції вкажемо шлях до зображення:

$img = imageCreateFromJPEG($path); // створюємо зображення з файлу

Тепер ми маємо дублікат наявного у нас кольорового зображення. При цьому вказівник на створене зображення (ресурс) міститься у змінній $img. Для обробки картинки використовуємо другу функцію — imageFilter(). Ця функція має 2 обов’язкових параметр — покажчик та застосовується фільтр. Ознайомитися з усіма типами фільтрів Ви можете у документації до даної функції. Нам же потрібно фільтр IMG_FILTER_GRAYSCALE:

if($img && imageFilter($img, IMG_FILTER_GRAYSCALE)){
}else{
}

Тут ми створюємо умова, яким повіряємо, є ресурс і успішно пройшло застосування фільтра. Якщо умова поверне ІСТИНУ — значить, ми можемо зберігати отримане зображення. Інакше — виведемо помилку.

Зберегти зображення допоможе нам 3-я функцію зі списку, що має 2 обов’язкових параметра — ресурс і шлях для збереження картинки:

if($img && imageFilter($img, IMG_FILTER_GRAYSCALE)){
imagejpeg($img, $bwFolder . $file); // зберігаємо обесцвеченное зображення
}else{
echo ‘

Помилка конвертування

‘;
}

Все, що нам залишається зробити, — це видалити робочий зображення (ресурс) після збереження. Це робить остання функція списку:

imagedestroy($img); // звільняємо пам’ять

Якщо все пройде успішно, то в каталозі blackwhite після запуску скрипта з’явиться картинка 1.jpg але ця картинка вже буде знебарвленою. Давайте виведемо її на екран:

echo «Створення чорно-білого зображення з кольорового«;

На екран виводиться 2 картинки:

Створення чорно-білого зображення з кольорового

Тепер залишилося оформити весь код у вигляді функції, щоб зробити його прийнятним для багаторазового використання і привести в порядок код. Отже, функція буде мати такий вигляд:

function colorToBW($colorFolder, $bwFolder, $file, $quality){
$path = $colorFolder . $file;
$img = @imageCreateFromJPEG($path); // створюємо зображення з файлу
if($img && imageFilter($img, IMG_FILTER_GRAYSCALE)){
imagejpeg($img, $bwFolder . $file, $quality); // зберігаємо обесцвеченное зображення
$res = true;
}else{
$res = false;
}
@imagedestroy($img); // звільняємо пам’ять
return $res;
}

Давайте розберемо нові моменти. По-перше, перед функціями imageCreateFromJPEG() і imagedestroy() ми поставили символ придушення помилок — «@». Це зроблено для того, щоб у разі помилки створення зображення був виведений наш текст помилки.

Далі ми бачимо, що в функцію подається не 3 параметра, а 4… це:

$colorFolder — шлях до папки кольорових картинок;

$bwFolder — шлях до папки ЧБ картинок;

$file — ім’я картинки;

$quality — якість файлу.

Останній параметр ми можемо використовувати для функції imagejpeg(), вказуючи третім необов’язковим параметром цієї функції. Цей параметр може приймати ціле число від 0 до 100 і відповідає за якість. За замовчуванням цей параметр дорівнює 75.

В підсумку наша функція повертає значення змінної $res, яке може бути або ІСТИНОЮ, або БРЕХНЕЮ. Це зручно, оскільки при роботі функції можна перевірити що вона повернула.

Залишається описати в коді висновок ЧБ зображення, яке при події наведення курсору змінюється на кольорове. Коли ж миша покине область зображення — воно знову повинно змінитися на ЧБ. Повний код може бути таким: