Создание водяных знаков с помощью PHP. PHP: Наложение водяного знака Реализация нанесения водяного знака с помощью PHP
В некоторых случаях добавлять водяные знаки на изображения, которые вы размещаете на своем сайте – это единственный способ хоть как-то защитить их от воровства. К тому же поговаривают, что такие вот водяные знаки привлекают дополнительный трафик.
Есть много способов сделать водяной знак на изображении с помощью PHP , но вот моему заказчику потребовался способ нанесения, который позволял бы в любое время поменять водяной знак на новый.
Как оказалось, такое решение есть.
Обычно таким пользуются люди, которые разрабатывают сайты с большей частью графическим контентом.
Выбор способа нанесения водяного знака
Проблема реализации всего этого безобразия заключается в выборе способа нанесения водяного знака между производительностью и гибкости. Идеального решения, которое устраивало бы всех просто не существует. Именно поэтому есть множество реализаций.
В моем случае заказчик оставляет за собой право провести в любое время ребрендинг и вместо “Рога и Копыта” написать “Копыта и Рога” . Выбранные способ нанесения водяных знаков должен стерпеть и это.
Суть описанной здесь технологии нанесения водяного знака заключается в добавлении этого самого знака каждый раз как загружается изображение. Да, этот способ несет в себе ряд ограничений, которые могут существенно сказаться на производительности, но как говориться, заказчик всегда прав и поэтому если тех. задание требует динамически наносить водяной знак, то именно так и нужно сделать.
Если у кого-то есть более простой способ, то милости прошу в комментарии. Будет интересно послушать.
До приведения какого-то кода хотелось бы описать достоинства, а также привести рабочий пример.
Плюсы:
- можно менять водяной знак хоть 500 раз на дню;
- можно развернуть в любой CMS (к ней она никак не привязана).
Минусы:
- зависит от производительности хостинга (если у Вас много изображений или они большого разрешения, то это может оказать значительную нагрузку на сервер);
- пытливый ум все таки сможет убрать ваш водяной знак.
Выводы: для размещения небольшого количество изображений с нанесенными водяными знаками этот метод подойдет как нельзя лучше, но если Вы собираетесь открывать фотогаллерею, то будет правильнее поискать что-то менее высоконагруженное.
Пример
Реализация нанесения водяного знака с помощью PHP
Как и обещал для этого не нужно обладать какими-то особыми знаниями, необходимо:
- файл , который находится в архиве, и поместить в корневую директорию вашего сайта;
- изображение, которое будет выступать в роли водяного знака, помещаем в корневую директорию сайта и обзываем (в моем случае это белый мазок кисти, поэтому по ссылке он может быть не различим на фоне вашего браузера). Изображение должно быть именно PNG , так как в нем есть прозрачный слой. Если хотите использовать GIF , то необходимо редактировать файл image.php ;
- в том месте, где нужно вывести изображение с водяным знаком, помещаем код:
Вот и всё. Все довольны, и Вы, и заказчик.
Если вы хотите добавить водяной знак на фото, не заморачиваясь с графическими редакторами или добавлять его во время загрузки фоток на сервер, то это урок для вас.
В этом уроке я покажу вам как добавить водяной знак на изображение на лету, фактически не изменяя исходное изображение. В первую очередь, вам понадобится изображение, которое вы будете использовать в качестве водяного знака.
Затем формируем заголовок файла:
// это строка сообщит браузеру что мы передаём jpg изображение header("content-type: image/jpeg");
Затем мы формируем png изображение и получаем его размеры:
// создание водяного знака в формате png $watermark = imagecreatefrompng("watermark.png"); // получаем ширину и высоту $watermark_width = imagesx($watermark); $watermark_height = imagesy($watermark);
То же самое сделаем и с оригинальным изображением, но только в формате jpg. Это обычное дело для фоток, которые загружаются через форму. Действуем следующим образом:
// создание jpg изображения $image_path = "original.jpg"; $image = imagecreatefromjpeg($image_path); // получаем размерность изображения $size = getimagesize($image_path);
Теперь нам надо поместить водяной знак на изображение:
// помещаем водяной знак в нижней части справа. Делаем отступ в 5px $dest_x = $size - $watermark_width - 5; $dest_y = $size - $watermark_height - 5;
Затем настроим опции смешивания для обоих изображений:
Imagealphablending($image, true); imagealphablending($watermark, true);
В конце концов мы создаём новое изображение используя параметры:
// создаём новое изображение imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height); imagejpeg($image);
Важно убрать за собой:
// освобождаем память imagedestroy($image); imagedestroy($watermark);
Для регулирования прозрачности водяного знака можно использовать Photoshop.
С теорией всё. Теперь применим наши знания в реальном проекте. Всё это необходимо сохранить в файл. К примеру под названием watermark.php
Header("content-type: image/jpeg"); // получаем имя изображения через GET $image = $_GET["image"]; // создаём водяной знак $watermark = imagecreatefrompng("watermark.png"); // получаем значения высоты и ширины водяного знака $watermark_width = imagesx($watermark); $watermark_height = imagesy($watermark); // создаём jpg из оригинального изображения $image_path = "/path/to/image/folder/" . $image; $image = imagecreatefromjpeg($image_path); //если что-то пойдёт не так if ($image === false) { return false; } $size = getimagesize($image_path); // помещаем водяной знак на изображение $dest_x = $size - $watermark_width - 5; $dest_y = $size - $watermark_height - 5; imagealphablending($image, true); imagealphablending($watermark, true); // создаём новое изображение imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height); imagejpeg($image); // освобождаем память imagedestroy($image); imagedestroy($watermark);
Теперь для того, чтобы показать фотку на которой будет водяной знак не изменяя исходное изображение, используйте следующий код.
В сети интернет присутствует большое количество изображений, которые, как правило, загружаются владельцами сайтов, либо пользователями сайта. В зависимости от актуальности изображение может мигрировать от сайта к сайту. Не говоря уже об авторском праве, не каждому владельцу сайта может понравиться тот факт, что изображения с его сайта копируют на других ресурсах. Как средство борьбы с банальным копированием изображений сайта было придумано накладывать водные знаки на изображения, с указанием принадлежности изображения к тому или иному ресурсу. Это может быть особо актуально для сайтов, у которых большое количество уникальных изображений.
Рассмотрим пример кода, который демонстрирует наложение водного знака, на загружаемые картинки.
Итак, основные настройки содержаться в виде констант, и идут в коде первыми:
// путь изображению водяного знака define("WATERMARK_OVERLAY_IMAGE", "/lab/watermark/watermark.png"); // Сжатие, диапазон 0-100 (влияет на качетсво изображения) define("WATERMARK_OUTPUT_QUALITY", 100); // папка с исходными изображениями define("UPLOADED_IMAGE_DESTINATION", "/lab/watermark/upload/src/"); // папка с обработанными изображениями define("WATERMARK_IMAGE_DESTINATION", "/lab/watermark/upload/");
На странице мы разместим форму загрузки изображения, с помощью которой изображения будут отправляться на сервер.
Код формы:
" style="max-width: 300px;" />
" style="max-width: 300px;" />
Ну а теперь самое основное, это функции для обработки изображения. Разместить эти функции следует перед показом формы на странице.
Две ключевые функции, с помощью одной изображение загружается на сервер, с помощью другой накладывается водяной знак. Пожалуй, комментарии к функциям расписаны более чем подробно, и писать тоже самое здесь будет лишним.
Владельцы сайтов (форумов, досок объявлений и т.д.) часто сталкиваются с проблемой создания водяных знаков на всех крупных изображениях сайта.
Конечно, решить эту проблему можно создавая водяной знак вручную на каждом изображении, однако, во-первых, это занимает много времени, во-вторых, возникает необходимость хранить две версии изображения, с водяным знаком и без него.
Решением данной проблемы может служить динамическое наложения водяного знака на изображение перед передачей его посетителю сайта.
В интернете есть решение данной проблемы в виде двух файлов, содержимое которых приведено ниже.
Исходный код файла ".htaccess"
DirectoryIndex index.php RewriteEngine On RewriteCond %{REQUEST_FILENAME} -f RewriteRule ^(.*)$ /watermark/_watermark.php
Исходный код файла "_watermark.php"
250) && ($info_o > 250)) { // Для изображений без альфа-канала // Последний параметр функции - степень непрозрачности водяного знака imageCopyMerge($out, $watermark, ($info_o-$info_w)/2, ($info_o-$info_w)/2, 0, 0, $info_w, $info_w, 25); // Для изображений с альфа-каналом // В этом случае прозрачность регулируется альфа-каналом самого изображения // imageCopy($out, $watermark, ($info_o-$info_w)/2, ($info_o-$info_w)/2, 0, 0, $info_w, $info_w); } switch ($info_o) { case 1: imageGIF($out); break; case 2: imageJPEG($out); break; case 3: imagePNG($out); break; default: return false; } imageDestroy($out); imageDestroy($original); imageDestroy($watermark); return true; } ?>
Решение сводится к следующему, в каталог с файлами изображений помещается файл ".htaccess". Кроме него на сервере создается папка "watermark", в которой находится файл скрипта "_watermark.php" и собственно файл водяного знака "watermark.png".
При этом мною, по сравнению с оригинальной версией, встреченной в интернете, были внесены незначительные изменения в оба текстовых файла.
В файл ".htaccess", в регулярное выражение поиска файлов изображений добавлено расширение "jpeg", как тоже часто встречающееся.
Скрипт "_watermark.php" переработан таким образом, чтобы помещать водяной знак по центру изображения (этого требовала специфика решаемой задачи) и добавлена возможность регулировать прозрачность создаваемого водяного знака (комментарии в теле скрипта помогут Вам самостоятельно настроить этот параметр).
Также следует обратить внимание на тот факт, что помещая папку "watermark" в папку с изображениями, как советуют оригинальные источники, мы не добьемся желаемого результата, т.к. в этом случае нам придется иметь в каждой папке свой собственный файл ".htaccess" и папку "watermark". Это связано с тем, что в файле ".htaccess" указываются абсолютные пути от корневого каталога сайта к файлу "_watermark.php". Таким образом, имея в каждой папке с изображениями отдельную подпапку "watermark", в случае необходимости изменить водяной знак (либо скрипт, накладывающий его на изображение), нам придется произвести изменения во всех папках.
Чтобы избежать этой проблемы, я рекомендую создавать папку "watermark" в корневом каталоге сайта, а в каталоги изображений помещать файл ".htaccess" без необходимости каждый раз его менять. В этом случае для изменения водяного знака или скрипта нам необходимо будет внести изменения лишь в одном месте сайта. Создавать разные водяные знаки для разных папок с изображениями в таком случае можно ссылаясь из разных файлов ".htaccess" на разные скрипты, например "_watermark-1.php", "_watermark-2.php" и т.д.
Таким образом, подводя итог, можно сказать, что для наложения водяных знаков на все изображения сайта необходимо скачать прилагаемый ниже архив, распаковать его, папку "watermark" поместить в корневой каталог сайта, заменить в ней файл водяного знака "watermark.png" на свой собственный, а файл ".htaccess" помещать в те каталоги сайта, изображения из которых должны помечаться водяным знаком.
Скачать архив, содержащий все необходимые файлы можно по этой
Одной из интересных вещей, которые вы можете сделать с помощью библиотеки работы с графикой в PHP GD, может быть класс, который ставит водяные знаки (watermarks) на изображение. Если говорить вкратце, то watermark - это технология для защиты цифровых изображений от несанкционированного использования путем нанесения на них водяных знаков или подписей. Как следствие из этого, ее можно применять (а в основном так и есть) для определения владельца авторского права на изображение. Итак, поехали дальше.
Вступление
На данном этапе свеого развития PHP предлагает программистам широкий набор функций для динамической генерации изображения и работы с ними. В этой статье я покажу методику создания класса, который будет ставить водяные знаки на эти самые изображения. Этот класс будет работать с двумя изображениями: исходное и водяной знак. Как дополнение, введен еще третий параметр - наш класс будет содержать альфа-переменную. Это позволит использовать для нашего водяного знака альфа-канал.
Для справки
альфа-канал (alpha-channel): часть изображения, хранящая информацию о прозрачности отдельных участков изображения, тогда как цветовые каналы хранят информацию о цвете изображения. В графических редакторах используется для маскирования (защиты от редактирования) некоторой области изображения. В некоторых приложениях они называются прозрачной маской.
Информация, находящаяся в альфа-канале чаще всего представляет выделенные области - некоторые формы или расположение цветных областей. Сохранение альфа-канала в изображении увеличивает размер файла на 1/3. RGB изображения могут иметь до 24 альфа-каналов. Точечные и индексированные изображения не могут содержать альфа-каналов.
Часть первая - основы
Перед тем, как начать написание самого класса, рассмотрим функции, которые будут в нем использоваться. Вот их список:
# возвращает ширину и высоту изображения imagesx() imagesy() # создаёт новое изображение true-color imagecreatetruecolor # возвращает ассоциативный массив с ключами red, green и blue (+ альфа-канал), содержащими соответствующие значения для специфицированного индекса цвета imagecolorsforindex() # возвращает индекс цвета пиксела в специфицированном месте в изображении imagecolorat() # рисует одиночный пиксел заданного цвета imagesetpixel() # возвращает индекс индекс цвета в палитре изображения, идентификатор цвета (составленный из RGB-компонентов) и индекс цвета палитры изображения, являющегося "ближайшим" к RGB-значению соответственно (эти данные необходимы для функции imagesetpixel()) imagecolorexact() imagecolorallocate() imagecolorclosest()
Как можно увидеть, у php достаточно функций для работы с графикой. Пусть назначение некоторых из них и не совсем понятно в теории, но вот на практике все гараздо проще. Поэтому, чтобы разобраться, как с ними работать, применим их в нашем классе.
Выбор пути к цели
Сейчас, когда мы уже определились с целью нашего "мини-проекта", немного вернемся назад и поговорим о способах ее воплощения.
Для начала, наше приложение получает два изображения - исходное изображения и сам водяной знак. Далее нам необходимо определить размеры этих изображений (width-ширину и height-высоту). Эти данные нам необходимы для расположения водяного знака в центре изображения (исходя из предположения, что размер водяного знака будет меньше самого рисунка).
Потом нужно будет наложить наш водяной знак на исходное изображение. Для этого нам потребуется сложить цвета (математически) накладываемых изображений для получения третьего.
И в итоге, нам нужно будет отобразить полученное изображение в браузере. В данном случае рисунок будет открываться непосредственно из источника, указанного в теге ""
Думаю, теории уже достаточно - ключевые моменты в ней раскрыты достаточно подробно. Теперь перейдем непосредственно к написанию скрипта.
Часть вторая - пишем скрипт
Начнем с самого простого - напишем класс, который создает файл с водяным знаком. Назовем его "watermark" и пропишем его код в файле "api.watermark.php". "Скелетом" класса будет три функции:
Следующим этапом будет написание кода функций класса "watermark". Дополняем файл "api.watermark.php" следующими строками кода:
# функция, которая сливает два исходных изображения в одно function create_watermark($main_img_obj, $watermark_img_obj, $alpha_level = 100) { # переводим значение прозрачности альфа-канала из % в десятки $alpha_level/= 100; # расчет размеров изображения (ширина и высота) $main_img_obj_w = imagesx($main_img_obj); $main_img_obj_h = imagesy($main_img_obj); $watermark_img_obj_w = imagesx($watermark_img_obj); $watermark_img_obj_h = imagesy($watermark_img_obj); # определение координат центра изображения $main_img_obj_min_x=floor(($main_img_obj_w/2)-($watermark_img_obj_w/2)); $main_img_obj_max_x=ceil(($main_img_obj_w/2)+($watermark_img_obj_w/2)); $main_img_obj_min_y=floor(($main_img_obj_h/2)-($watermark_img_obj_h/2)); $main_img_obj_max_y=ceil(($main_img_obj_h/2)+($watermark_img_obj_h/2)); # создание нового изображения $return_img = imagecreatetruecolor($main_img_obj_w, $main_img_obj_h); # пройдемся по исходному изображению # "некоторый код" # отображаем изображение с водяным знаком return $return_img; } # конец функции create_watermark()
Теперь подробнее рассмотрим функцию create_watermark().
Первым делом мы передаем ей три параметра:
# исходное изображение, на которое нужно поставить водяной знак $main_img_obj # сам водяной знак, должен содержать альфа-канал $watermark_img_obj # значение прозрачности альфа-канала водяного знака, (0-100, по умолчнию = 100) $alpha_level
(Важно отметить, что наша функция принимает изображения как объекты, а не просто как пути к ним - но об этом будет сказано чуть позже)
Следующим этапом будет создание нового, true-color изображения с теми же размерами, как и у исходной картинки. Это изображение (переменная $return_img) будет использовано для объединения информации из исходных картинок (рисунок и водяной знак).
Но перед этим еще нужно "пройтись" по каждому из двух исходных изборажений и "слить" их в одно. Вот только это еще рано делать - к этому мы еще не готовы. Вместо этого разместим комментарий "некоторый код", а затем дополним это место участком кода.
Финалом будет отображения нашего модифицированного изображения в веб-странице, которая его запросит. Далее рассмотрим оставшиеся две вспомогательные функции.
Часть третья - вспомогательные функции
Помимо функции create_watermark в нашем классе watermark присутствуют еще две функции. Продолжим исходный код класса следующими строками:
# усреднение двух цветов с учетом прозрачности альфа-канала function _get_ave_color($color_a, $color_b, $alpha_level) { return round((($color_a*(1-$alpha_level))+($color_b*$alpha_level))); } # возвращаем значения ближайших RGB-составляющих нового рисунка function _get_image_color($im, $r, $g, $b) { $c=imagecolorexact($im, $r, $g, $b); if ($c!=-1) return $c; $c=imagecolorallocate($im, $r, $g, $b); if ($c!=-1) return $c; return imagecolorclosest($im, $r, $g, $b); }
А теперь подробнее. Наша первая функция "_get_ave_color" принимает численные величины двух цветов и альфа-канала. Возвращает же она усредненную их величину. Эта функция нам необходима для определения цвета, который получится при наложении пикселей двух рисунков.
Вторая функция "_get_image_color" разбивает изображение на red (красный), green (зеленый) и синий (blue) составляющие (rgb-палитра). С помощью встроенных в php функций для работы с графикой (их описание было в начале статьи) получаем ближайшее значение цвета для нового изображения.
В дополнение еще проверяется несколько моментов. Во-первых, если удалось получить точное значение (переменная $c), то оно и возвращается из функции (return $c). В противном случае далается попытка подобрать цвет с помощью функции imagecolorallocate(). Если же и это не поможет достичь результата, то с помощью функции imagecolorclosest() просто возвращается ближайшее значение цвета (самое неточное).
Ну вот, наш класс и почти готов. Осталось только заменить в функции "create_watermark" комментарий "некоторый код" следующими строками:
# пройдемся по изображению for($y = 0; $y < $main_img_obj_h; $y++) { for ($x = 0; $x < $main_img_obj_w; $x++) { $return_color = NULL; # определение истинного расположения пикселя в пределах # нашего водяного знака $watermark_x = $x - $main_img_obj_min_x; $watermark_y = $y - $main_img_obj_min_y; # выбор информации о цвете для наших изображений $main_rgb = imagecolorsforindex($main_img_obj, imagecolorat($main_img_obj, $x, $y)); # если наш пиксель водяного знака непрозрачный if ($watermark_x >= 0 && $watermark_x < $watermark_img_obj_w && $watermark_y >= 0 && $watermark_y < $watermark_img_obj_h) { $watermark_rbg = imagecolorsforindex($watermark_img_obj, imagecolorat($watermark_img_obj, $watermark_x, $watermark_y)); # использование значения прозрачности альфа-канала $watermark_alpha = round(((127-$watermark_rbg["alpha"])/127),2); $watermark_alpha = $watermark_alpha * $alpha_level; # расчет цвета в месте наложения картинок $avg_red = $this->_get_ave_color($main_rgb["red"], $watermark_rbg["red"], $watermark_alpha); $avg_green = $this->_get_ave_color($main_rgb["green"], $watermark_rbg["green"], $watermark_alpha); $avg_blue = $this->_get_ave_color($main_rgb["blue"], $watermark_rbg["blue"], $watermark_alpha); # используя полученные данные, вычисляем индекс цвета $return_color = $this->_get_image_color($return_img, $avg_red, $avg_green, $avg_blue); # если же не получиться выбрать цвет, то просто возьмем # копию исходного пикселя } else { $return_color = imagecolorat($main_img_obj, $x, $y); } # из полученных пикселей рисуем новое изображение imagesetpixel($return_img, $x, $y, $return_color); } }
После написания такой значительной части кода можно сделать паузу и подробнее остановиться на его анализе.
Первым делом наш скрипт выполняет обход изображения с помощью двух циклов "for". Параллельно еще подсчитываются координаты каждого пикселя водяного знака.
Далее производится поиск информации о RGB для каждого пикселя. Если текущий пиксел не находиться в области пересечения исходного изображения и водяного знака, то наш класс лишь дублирует пиксел для нового изображения. В случае расположения пикселя в области пересечения, нам необходимо определить его цвет как результат наложения исходного рисунка и водяного знака.
Для определения цвета области пересечения, сначала нужно получить значение RGB-переменной водяного знака, используя информацию, которую мы получили в циклах "for". Потом с помощью функции "_get_ave_color" определяется среднее значение цвета для нового изображения. Далее следует функция "_get_image_color" для определения цветовой гаммы, которая будет использована функцией "return_img".
В итоге, после завершения работы циклов "for" у нас есть готовое изображение с водяным знаком.
А теперь проверим наш класс в деле.
Часть четвертая - тест-драйв
Для начала нам потребуются два файла. Первый назовем "watermark_test.php" и разместим в нем следующий код:
Назначения этого файла очень простое: он отображает в браузере исходное (main.jpg) и полученное (watermark.png, с водяным знаком) изображения.
Как можно увидеть, наше второе изображение (watermark.png) ссылается на php-файл image.php, а не на файл-изображение. Эта ссылка имеет вид GET-запроса, где в php-файл передаются значения двух переменных: $main и $watermark.
Второй файл назовем "image.php" и и разместим в нем следующий код:
create_watermark($main_img_obj, $watermark_img_obj, 66); # отобразим наше полученное изображение в браузере - # но сначала сообщим ему, что это jpeg-файл header("Content-Type: image/jpeg"); header("Content-Disposition: inline; filename=" . $_GET["src"]); imagejpeg($return_img_obj, "", 50); ?>
Ну вот и подобрались к финалу. (ZIP, 47.6Kb)
