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

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

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

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

Что же, давайте приступим к реализации задачи…

План урока

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

    2. Реализация задачи при помощи jQuery

Детали учебника

Тема: PHP, jQuery

Сложность: Средняя

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

Время: 01:03:32

Размер архива: 78 Mb

скачать исходникискачать урок

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

Первый способ, который мы рассмотрим, позволяет обрабатывать картинки на стороне сервера. Делать это мы будем средствами PHP. Сразу стоит оговориться, что для успешной работы данного способа версия PHP на Вашем сервере должна стоять версия PHP не ниже 5-ой и должна быть библиотека GD (библиотека для работы с изображениями). Как все это проверить, мы рассмотрим ниже.

Итак, для начала создадим на сервере 2 папки, назовем их, к примеру, «blackwhite» и «color». Первая папка будет хранить ЧБ изображения, вторая — цветные. Мы здесь не будем рассматривать загрузку изображений пользователями на сервер и вывод этих изображений на сайт. Все это Вы можете найти в наших предыдущих уроках, в частности это уроки Загрузка изображений с изменением размера и Галерея для сайта при помощи HTML, CSS, jQuery и PHP.

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

]$colorFolder = "color/"; // каталог цветных картинок
$bwFolder = "blackwhite/"; // каталог ЧБ изображений
$file = "1.jpg"; // цветная картинка
$path = $colorFolder . $file; // путь к файлу цветной картинки

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

$colorFolder = "color/";
$bwFolder = "blackwhite/";
$file = "1.jpg";
$path = $colorFolder . $file;
echo "<img src='$path'>";

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

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

Теперь приступим к самому интересному — к обработке изображений средствами 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 '<p>Ошибка конвертирования</p>';
	}

Все, что нам остается сделать, — это удалить рабочее изображение (ресурс) после сохранения. Это делает последняя функция списка:

imagedestroy($img); // освобождаем память

Если все пройдет успешно, то в каталоге blackwhite после запуска скрипта появится картинка 1.jpg, но картинка эта уже будет обесцвеченной. Давайте выведем ее на экран:

echo "<img src='{$bwFolder}{$file}'>";

На экран выводится 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, которое может быть либо ИСТИНОЙ, либо ЛОЖЬЮ. Это удобно, поскольку при работе функции можно проверить что она вернула.

Остается описать в коде вывод ЧБ изображения, которое при событии наведения мыши меняется на цветное. Когда же мышь покинет область изображения — оно вновь должно поменяться на ЧБ. Полный код может быть таким:

<?php

$colorFolder = "color/";
$bwFolder = "blackwhite/";
$file = "1.jpg";
$quality = 75;

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;
}

if(!colorToBW($colorFolder, $bwFolder, $file, $quality)){
	echo 'Ошибка конвертирования';
	exit;
}

echo "<img src='{$bwFolder}{$file}' onMouseOver='this.src=\"{$colorFolder}{$file}\"' onMouseOut='this.src=\"{$bwFolder}{$file}\"'>";

?>

Отлично! Мы реализовали задачу средствами PHP. Пора приступить ко второй части урока.

2. Реализация задачи при помощи jQuery

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

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/grayscale.js"></script>

Теперь выведем цветные изображения на экран:

<img class="color" src="color/1.jpg">
<img class="color" src="color/2.jpg">

Здесь я добавил еще одно изображение. Отлично, сейчас выведено 2 цветные картинки:

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

Теперь все, что нам нужно, — это вызвать функцию grayscale() плагина для картинок (они имеют класс color):

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

Если сейчас посмотреть результат в браузере, то мы увидим ЧБ изображения:

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

Согласно задаче, необходимо вернуть цвет картинкам при наведении на них и вновь обесцветить их при уходе мыши. В этом нам поможет метод jQuery — hover — и метод reset плагина:

<script type="text/javascript">
	$(document).ready(function(){
		grayscale($('.color'));
		
		$('.color').hover(function(){
			grayscale.reset($(this));
		}, function(){
			grayscale($(this));
		});
	});
</script>

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

<script type="text/javascript">
	$(document).ready(function(){
		grayscale.prepare($('.color'));
		grayscale($('.color'));
		
		$('.color').hover(function(){
			grayscale.reset($(this));
		}, function(){
			grayscale($(this));
		});
	});
</script>

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

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: , , ,

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

Комментарии Facebook:

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

  1. Андрей Степанов

    Здравствуйте Андрей Кудлай с большим удовольствием смотрю ваши уроки. Особенно понравился курс по созданию собственного блога. Не могли бы вы по данному курсу создать обучающее видео по смене пароля к администраторской части с отправкой подтверждения на mail или мобильный телефон. В заранее спасибо !

    • Андрей Кудлай

      Здравствуйте, Андрей. В одном из уроков мы обязательно покажем, как производится смена пароля с уведомлением.

  2. Dmitry

    Очень интересный и познавательный видеоурок. А как сделать так, чтобы при нажатие на картинку открывалась большая картинка с таким же изображением по центру и затемнением фона экрана, допустим на 70%. Я был бы очень благодарен за такой видеоурок с применением JQuery. Так, например, сейчас я пользуюсь сравнительно старым плагином Light Gallery.
    Спасибо!

  3. Александр

    Не работает в хроме, prepare не помогает.

    • Андрей Кудлай

      А в видео все работает, как Вы должны были увидеть. Возможно, работу скрипта проверяете не на сервере?

      • Александр

        на сервере. В Firefoxе работает, а в хроме просто цветные картинки.

        • Андрей Кудлай

          Только что проверил. Chrom, версия — 23.0.1271.97. На сервере (по протоколу HTTP) — все ок. Не на сервере (по протоколу FILE) — в хроме не работает. Пример.

  4. Андрей

    Здравствуйте, а как сделать,что бы картинка была цветной,а при наведении становилась чб?
    Спасибо.

    • Андрей Кудлай

      Здравствуйте.
      На PHP просто выводите картинку из папки для цветных картинок и меняете при наведении мыши на черно-белую.
      Если возникнут вопросы, связанные с кодом, то задавайте их на нашем форуме.

      • Андрей

        Подскажите, что нужно заменить при помощи jQuery,пробую нечего не получается!
        Спасибо.

        • Андрей Кудлай

          Я, вроде как, ответил, что все вопросы, связанные с кодом, решаются на форуме. Задайте вопрос на форуме и там Вам помогут. На самом деле вопрос решается буквально за минуту.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree