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

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

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

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

План уроку

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

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

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

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-х функцій:

Зауважте, що передбачається робота з картинками формату 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… це:

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

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

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

“;
?>

Відмінно! Ми реалізували завдання засобами PHP. Пора приступити до другої частини уроку.

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

Для другого варіанту нам потрібно тільки каталог для кольорових картинок, оскільки обробляти зображення ми будемо «на льоту». Також нам знадобиться бібліотека jQuery (її Ви знайдете в додаткових матеріалах чи можете завантажити на офсайті). І, нарешті, нам знадобиться плагін, який і буде виробляти знебарвлення зображень. Цей плагін — grayscale.js — Ви знайдете в додаткових матеріалах.

Отже, підключимо необхідні для роботи скрипти до нашої сторінці — я її назву, наприклад, color.html:

Тепер виведемо кольорові зображення на екран:

Тут я додав ще одне зображення. Відмінно, зараз виведено 2 кольорові картинки:

Тепер все, що нам потрібно, — це викликати функцію grayscale() плагіна для картинок (вони мають клас color):

$(document).ready(function(){
grayscale($(‘.color’));
}

Якщо зараз подивитися результат в браузері, то ми побачимо ЧБ зображення:

Відповідно до завдання, необхідно повернути колір картинок при наведенні на них і знову знебарвлювати їх при догляді миші. В цьому нам допоможе метод jQuery — hover — і метод reset плагіна:

$(document).ready(function(){
grayscale($(‘.color’));
$(‘.color’).hover(function(){
grayscale.reset($(this));
}, function(){
grayscale($(this));
});
});

Ось фактично і все. Зараз при наведенні курсору миші на картинку відбувається скидання функції grayscale(), при догляді миші з картинки — знову застосовується ця функція. Все здавалося б добре, але… як вказує автор плагіна, в подібній реалізації спостерігається некоректна робота в браузері Chrome. Щоб уникнути цього, досить перед застосуванням функції grayscale() викликати метод prepare():

$(document).ready(function(){
grayscale.prepare($(‘.color’));
grayscale($(‘.color’));
$(‘.color’).hover(function(){
grayscale.reset($(this));
}, function(){
grayscale($(this));
});
});

Ось тепер дійсно все

Який з двох варіантів взяти для реалізації задачі, поставленої на початку уроку, вибирати Вам. Слід тільки попередити, що другий варіант можна використовувати тільки для відносно невеликих розмірів зображень і для невеликої кількості зображень на сторінці.

На цьому урок закінчений. Удачі Вам і до нових зустрічей.