Создание черно-белого изображения из цветного

Создание черно-белого изображения из цветного

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

В принципе, нет ничего проще, чем подготовить картинку заранее и воспользоваться техникой спрайтов для смены картинок одной на другую. Но это решение далеко не всегда нам подойдет. Например, мы позволяем пользователям нашего сайта загружать картинки, к которым и должен быть применен нужный нам эффект. Очевидно, что здесь мы уже должны обработать загруженные изображения на стороне сервера (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) создадим необходимые для работы переменные:

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

Пока что, как и положено, выводится имеющееся у нас цветное изображение:

Создание черно-белого изображения из цветного

Теперь приступим к самому интересному — к обработке изображений средствами 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:

Здесь мы создаем условие, которым поверяем, имеется ли ресурс и успешно ли прошло применение фильтра. Если условие вернет ИСТИНУ — значит, мы можем сохранять полученное изображение. Иначе — выведем ошибку.

Сохранить изображение нам поможет 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 плагина:

Вот фактически и все. Сейчас при наведении курсора мыши на картинку происходит сброс функции grayscale(), при уходе мыши с картинки — вновь применяется эта функция. Все казалось бы отлично, но… как указывает автор плагина, в подобной реализации наблюдается некорректная работа в браузере Chrome. Чтобы избежать этого, достаточно перед применением функции grayscale() вызвать метод prepare():

Вот теперь действительно все 🙂

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

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

Метки: , , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (12)