В принципі, немає нічого простішого, ніж підготувати картинку заздалегідь і скористатися технікою спрайтів для зміни картинок однієї на іншу. Але це рішення далеко не завжди нам підійде. Наприклад, ми дозволяємо користувачам нашого сайту завантажувати картинки, до яких і повинен бути застосований потрібний нам ефект. Очевидно, що тут ми вже повинні обробити завантажені зображення на стороні сервера (PHP) або клієнта (JS), щоб на сайт виводилося ЧБ зображення.
Що ж, давайте приступимо до реалізації завдання ...
план уроку
1. Реалізація завдання на PHP
2. Реалізація завдання за допомогою jQuery
Фреймворк YII2. Швидка розробка з сучасним PHP фреймворком
Дізнайся тонкощі сучасної веб-розробки за допомогою фреймворка YII2
деталі підручника
Розмір архіву: 78 Mb
1. Реалізація завдання на PHP
Перший спосіб, який ми розглянемо, дозволяє обробляти картинки на стороні сервера. Робити це ми будемо засобами PHP. Відразу варто обмовитися, що для успішної роботи даного способу версія PHP на Вашому сервері повинна стояти версія PHP не нижче 5-ої і повинна бути бібліотека GD (бібліотека для роботи із зображеннями). Як все це перевірити, ми розглянемо нижче.
Отже, для початку створимо на сервері 2 папки, назвемо їх, наприклад, «blackwhite» і «color». Перша папка буде зберігати ЧБ зображення, друга - кольорові. Ми тут не будемо розглядати завантаження зображень користувачами на сервер і висновок цих зображень на сайт. Все це Ви можете знайти в наших попередніх уроках, зокрема це урок Завантаження зображень зі зміною розміру.
Тепер у файлі скрипта (наприклад, index.php) створимо необхідні для роботи змінні:
Поки що, як і належить, виводиться наявне у нас кольорове зображення:
Тепер приступимо до найцікавішого - до обробки зображень засобами PHP. Проводити цю обробку нам дозволять функції бібліотеки GD. Це своєрідний «Photoshop в PHP», якщо можна так сказати. Давайте перед подальшою роботою перевіримо, чи встановлена на нашому сервері бібліотека GD. Зробити це можна в такий спосіб:
Функція function_exists () перевіряє, чи визначена конкретна функція і повертає істину, якщо функція підтримується. В даному випадку ми перевірили чи підтримується функція imagefilter (). Якщо е така можливість, то на екран буде виведено «OK». У тому випадку, якщо функція не визначена, попросіть хостера встановити бібліотеку GD.
Подальша робота буде будуватися на використанні 4-х функцій:
imageCreateFromJPEG () - створення нового зображення з наявного;
imageFilter () - застосування фільтра до зображення;
imagejpeg () - збереження зображення;
imagedestroy () - видалення зображення.
Зауважте, що передбачається робота з картинками формату JPG, а тому використовуються відповідні функції. Есоі картинки будуть в форматі GIF, тоді ми повинні використовувати функції imageCreateFromGIF і imageGIF. Отже, ми маємо вихідне кольорове зображення, на основі якого нам потрібно створити ЧБ зображення. Перше, що ми зробимо - це створимо нове зображення з наявного. Для цього в якості параметра функції вкажемо шлях до зображення:
Тепер ми маємо дублікат наявного у нас кольорового зображення. При цьому покажчик на створене зображення (ресурс) міститься в змінній $ img. Для обробки картинки використовуємо другу функцію - imageFilter (). Ця функція має 2 обов'язкових параметра - покажчик і застосовуваний фільтр. Ознайомитися з усіма типами фільтрів Ви можете в документації до даної функції. Нам же потрібно фільтр IMG_FILTER_GRAYSCALE:
Тут ми створюємо умова, яким довіряли, чи є ресурс і успішно чи пройшло застосування фільтра. Якщо умова поверне істину - значить, ми можемо зберігати отримане зображення. Інакше - виведемо помилку.
Фреймворк YII2. Швидка розробка з сучасним PHP фреймворком
Дізнайся тонкощі сучасної веб-розробки за допомогою фреймворка YII2
Зберегти зображення нам допоможе 3-тя функція зі списку, що має 2 обов'язкових параметра - ресурс і шлях для збереження картинки:
Все, що нам залишається зробити, - це видалити робоче зображення (ресурс) після збереження. Це робить остання функція списку:
Якщо все пройде успішно, то в каталозі blackwhite після запуску скрипта з'явиться картинка 1.jpg, але картинка ця вже буде знебарвленою. Давайте виведемо її на екран:
На екран виводиться 2 картинки:
Тепер залишилося оформити весь код у вигляді функції, щоб зробити його прийнятним для багаторазового використання і привести в порядок код. Отже, функція буде мати такий вигляд:
Давайте розберемо нові моменти. По-перше, перед функціями imageCreateFromJPEG () і imagedestroy () ми поставили символ придушення помилок - «@». Це зроблено для того, щоб в разі помилки створення зображення був виведений наш текст помилки.
Далі ми бачимо, що в функцію подається не 3 параметри, а 4 ... це:
$ ColorFolder - шлях до папки кольорових картинок;
$ BwFolder - шлях до папки ЧБ картинок;
$ File - ім'я картинки;
$ Quality - якість файлу.
Останній параметр ми можемо використовувати для функції imagejpeg (), вказуючи третім необов'язковим параметром цієї функції. Цей параметр може приймати ціле число від 0 до 100 і відповідає за якість. За замовчуванням цей параметр дорівнює 75.
У підсумку наша функція повертає значення змінної $ res, яке може бути або істинним, або брехнею. Це зручно, оскільки при роботі функції можна перевірити що вона повернула.
Залишається описати в коді висновок ЧБ зображення, яке при подію наведення миші змінюється на кольорове. Коли ж миша покине область зображення - воно знову має змінитися на ЧБ. Повний код може бути таким:
Відмінно! Ми реалізували завдання засобами PHP. Пора приступити до другої частини уроку.
2. Реалізація завдання за допомогою jQuery
Для другого варіанту нам буде потрібно тільки каталог для кольорових картинок, оскільки обробляти зображення ми будемо «на льоту». Також нам потрібно бібліотека jQuery (її Ви знайдете в додаткових матеріалах або можете завантажити на офсайті). І, нарешті, нам знадобиться плагін, який і буде виробляти знебарвлення зображень. Цей плагін - grayscale.js - Ви знайдете в додаткових матеріалах.
Отже, підключимо необхідні для роботи скрипти до нашої сторінці - я її назву, наприклад, color.html:
Тепер виведемо кольорові зображення на екран:
Тут я додав ще одне зображення. Відмінно, зараз виведено 2 кольорові картинки:
Тепер все, що нам потрібно, - це викликати функцію grayscale () плагіна для картинок (вони мають клас color):
Якщо зараз подивитися результат в браузері, то ми побачимо ЧБ зображення:
Згідно завданню, необхідно повернути колір картинкам при наведенні на них і знову знебарвити їх при догляді миші. У цьому нам допоможе метод jQuery - hover - і метод reset плагіна:
Ось тепер дійсно все
Який з двох варіантів взяти для реалізації завдання, поставленого на початку уроку, вибирати Вам. Слід тільки попередити, що другий варіант можна використовувати тільки для відносно невеликих розмірів зображень і для невеликої кількості зображень на сторінці.
На цьому даний урок закінчений. Удачі Вам і до нових зустрічей.
Фреймворк YII2. Швидка розробка з сучасним PHP фреймворком
Дізнайся тонкощі сучасної веб-розробки за допомогою фреймворка YII2
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі