WebScript.Ru
C:\   главная  ::   о сайте  ::  каталог скриптов  ::  гнездо  ::  форум  ::   авторам  :: Новостройки ::   ХОСТИНГ  ::

|| разделы::
|| поиск по сайту::

|| реклама::
|| новости почтой::
Рассылки Subscribe.Ru ::



Новости сайта WebScript.Ru
Популярные статьи

Hot 5 Stories

|| рекомендуем::




Создание водяных знаков с помощью PHP


Прислал: Николай Рудченко [ 29.08.2006 @ 13:15 ]
Раздел:: [ Статьи по PHP ]


Создание водяных знаков с помощью PHP

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

Потом нужно будет наложить наш водяной знак на исходное изображение. Для этого нам потребуется сложить цвета (математически) накладываемых изображений для получения третьего.

И в итоге, нам нужно будет отобразить полученное изображение в браузере. В данном случае рисунок будет открываться непосредственно из источника, указанного в теге “<img>"

Думаю, теории уже достаточно - ключевые моменты в ней раскрыты достаточно подробно. Теперь перейдем непосредственно к написанию скрипта.

Часть вторая - пишем скрипт

Начнем с самого простого - напишем класс, который создает файл с водяным знаком. Назовем его "watermark" и пропишем его код в файле “api.watermark.php”. "Скелетом" класса будет три функции:

    <?php
    class watermark
    {
      # функция, которая сливает два исходных изображения в одно
      function create_watermark() { }
      # функция для "усреднения" цветов изображений
      function _get_ave_color() { }
      # функция, которая находит ближайшие RGB-цвета для нового изображения
      function _get_image_color() { }
    }
    ?>

Следующим этапом будет написание кода функций класса "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   # сам водяной знак, должен содержать альфа-канал
$alpha_level                 # значение прозрачности альфа-канала водяного знака, (0-100, по умолчнию = 100)

(Важно отметить, что наша функция принимает изображения как объекты, а не просто как пути к ним – но об этом будет сказано чуть позже)

Далее мы нам необходимо получить информацию об каждом из изображений. Нам это необходимо знать координаты X и Y для расположения водяного знака в центре исходного изображения.

Следующим этапом будет создание нового, 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” и разместим в нем следующий код:

<!-- original image -->
<img src="main.jpg">

<br><br>

<!-- watermarked image -->
<img src="image.php?main=main.jpg&watermark=watermark.png">

Назначения этотго файла очень простое: он отображает в браузере исходное (main.jpg) и полученное (watermark.png, с водяным знаком) изображения.

Как можно увидеть, наше второе изображение (watermark.png) ссылается на php-файл image.php, а не на файл-изображение. Эта ссылка имеет вид GET-запроса, где в php-файл передаются значения двух переменных: $main и $watermark.

Второй файл назовем “image.php” и и разместим в нем следующий код:

    <?php
      # подключаем наш класс 'watermark'
      include 'api.watermark.php';
      $watermark = new watermark();
      # создаем объекты-изображения используя исходные файлы (main.jpg и watermark.png)
      $main_img_obj = imagecreatefromjpeg( $_GET['main'] );
      $watermark_img_obj = imagecreatefrompng( $_GET['watermark'] );
      # создаем изображение с водяным знаком - значение прозрачности альфа-канала водяного знака установим в 66%
      $return_img_obj = $watermark->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 );
    ?>

Ну вот и подобрались к финалу.
Для тех, кто хочет получить больше информации о создании изображений в популярных форматах, даю несколько ссылок:

//www.php.net/manual/en/function.imagecreatefromgif.php
//www.php.net/manual/en/function.imagecreatefromjpeg.php
//www.php.net/manual/en/function.imagecreatefrompng.php

Чтобы протестировать наш скрипт, просто запустите в браузере файл “watermark_test.php”. Как результат, должно быть два изображения - исходное и с водяным знаком.

Исходники

И в заключение

Надеюсь, моя статья помогла вам лучше понять принцип работы с графической библиотекой GD. Более полную информацию о работе с изображениями можно прочитать в интернете: //www.php.net/manual/en/ref.image.php




 :::::  Elias пишет 30.08.2006 @ 09:33 
Кульно. Мне понравилась статья.
 :::::  Lev пишет 07.09.2006 @ 10:48 
Загрузил в Denver исходники, исходный jpg видно, с водяным знаком-нет. В чем причина?
 :::::  Roman пишет 17.09.2006 @ 21:09 
у меня тоже. Gd стоит и работает
 :::::  Grin пишет 24.09.2006 @ 20:21 
Офигенно!
 :::::  Kir_pich пишет 10.10.2006 @ 17:37 
Пику скрипт похерил не по деццки!!! це не есть гуд:-(((

2 lev. качни исходники. всё работает!
 :::::  alex1116 пишет 23.11.2006 @ 00:14 
Рульная статья. Как раз с этим сейчас работаю - но просто тупо брал прозрачную гифку и накладывал ее. 5 баллов автору .
 :::::  waldemar пишет 23.01.2007 @ 16:31 
чтобы нормально работало, когда фон gif или png нужно заменить код

$return_color = imagecolorat( $main_img_obj, $x, $y );

на

$rbg = imagecolorsforindex( $main_img_obj, imagecolorat( $main_img_obj, $x, $y ) );
$return_color = $this->_get_image_color( $return_img, $rbg['red'], $rbg['green'], $rbg['blue'] );
 :::::  Stanley пишет 20.04.2007 @ 14:08 
Хорошо все это, но тормозит скрипт страшно...
 :::::  Psych пишет 18.05.2007 @ 08:48 
Ничто не мешает если картинок много этим скриптом их сначала заготовить а потом показывать, а не делать это налету. В крайнем случае можно при добавлении картинки обрабатывать ее и ложить отдельно оригинал а отдельно измененную. Я для себя этот вопрос давно решил но почитать было интересно, молодец мужик.
 :::::  йожыг пишет 11.07.2007 @ 15:40 
не работает на локалхосте, но на серве в инете работает :\ чего ему не хватает?
 :::::  вопрос пишет 15.08.2007 @ 19:22 
А если положение логотипа изменить надо? Например хотелось бы в углу а не по центру, тогда что?
 :::::  mishanya00 пишет 30.10.2007 @ 17:36 
Кульная статья, чуваку респект и уважуха.

Чтоб заменить положение водяного знака меняй $main_img_obj_min_x, $main_img_obj_max_x, $main_img_obj_min_y, $main_img_obj_max_y.

Например внизу справо:
$main_img_obj_min_x = floor( $main_img_obj_w - $watermark_img_obj_w) );
$main_img_obj_max_x = ceil( $main_img_obj_w );
$main_img_obj_min_y = floor( $main_img_obj_h - $watermark_img_obj_h) );
$main_img_obj_max_y = ceil( $main_img_obj_h );
 :::::  UshkiNaMakushke пишет 04.12.2007 @ 17:33 
у получившейся картинки теряется качество, что делать((((((
 :::::  Andreas пишет 08.02.2008 @ 14:33 
imagejpeg($target,null,100);
Третий передаваемый параметр - это качество выводимой в браузер картинки!
 :::::  Игорь пишет 23.02.2008 @ 17:23 
Спасибо большое. Не пришлось самому писать, сразу попал на толковый скрипт, а те кто задает вопросы здесь, прежде чем задавать, разберитесь в скрипте и научитесь сами отвечать на свои вопросы.
 :::::  lexx_ksb пишет 01.03.2008 @ 09:19 
>у получившейся картинки теряется качество, что делать((((((
А как быть если у меня фон gif ? imagejpeg() тут не пойдет
 :::::  demoniqus пишет 15.07.2008 @ 18:03 
Есть несколько проблем:
1. у PNG остается светлый фон под надписью. Этот фон портит защищаемый рисунок. Трабла заключается и в том, что добиться монохромного фона в форматах, использующих сжатие и теряющих качество, наврядли можно, а значит отфильтровать фон намного труднее, поскольку каждый его пиксель имеет свой уникальный цвет. Кто знает, как решить эту проблему, пишите.
2. при выводе максимального качества 100 через imageJPEG почему-то рисунок получился в 4 раза больше (151 килобайт против 40 исходных). Поставив качество 85 получил приемлемый результат (48 против 40 исходных килобайт)
 :::::  Toreador пишет 23.07.2009 @ 14:24 
Маленькое усовершенствование по местоположению водяного знака:
Вот что в watermark_test.php:
-----------------------------------------------------
<?php
/*
* Created on 23.07.2009 12:42:18
* File: watermark_test.php
*
* Autor: STEMPLEVSKI MAX
*/
?>
<!-- original image -->
<img src="main.jpg">+<img src="im.png">=
<!-- watermarked image -->

<img src="image.php?main=main.jpg&watermark=im.png&type=1">
<img src="image.php?main=main.jpg&watermark=im.png&type=2">
<img src="image.php?main=main.jpg&watermark=im.png&type=3">
<img src="image.php?main=main.jpg&watermark=im.png&type=4">
<img src="image.php?main=main.jpg&watermark=im.png&type=5">
---------------------------------------------------------

Вот, что изменить/добавить в image.php
----------------------------------------------------------
$type=$_GET['type'];
# создаем изображение с водяным знаком - значение прозрачности альфа-канала водяного знака установим в 66%
$return_img_obj = $watermark->create_watermark( $main_img_obj, $watermark_img_obj, 70, $type );
----------------------------------------------------------

И меняем верхушку функии в api.watermark.php:
---------------------------------------------------------
# функция, которая сливает два исходных изображения в одно
function create_watermark( $main_img_obj, $watermark_img_obj, $alpha_level = 100, $type=1 )
{
$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 );
# определение координат центра изображения
switch ( $type ) {
case 1:
$main_img_obj_min_x = floor( $main_img_obj_w - ($watermark_img_obj_w));
$main_img_obj_max_x = ceil( $main_img_obj_w );
$main_img_obj_min_y = floor( $main_img_obj_h - $watermark_img_obj_h) ;
$main_img_obj_max_y = ceil( $main_img_obj_h );
break;
case 2:
$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 ) );
break;
case 3:
$main_img_obj_min_x = floor($main_img_obj_w - ($watermark_img_obj_w));
$main_img_obj_max_x = ceil( ( $main_img_obj_w / 2 ) + ( $watermark_img_obj_w / 2 ) );
$main_img_obj_min_y = floor($watermark_img_obj_h - ( $watermark_img_obj_h )) ;
$main_img_obj_max_y = ceil( $main_img_obj_h );
break;
case 4:
$main_img_obj_min_x = 0;
$main_img_obj_max_x = ceil($watermark_img_obj_w);
$main_img_obj_min_y = 0;
$main_img_obj_max_y = ceil($main_img_obj_h);
break;
case 5:
$main_img_obj_min_x = 0;
$main_img_obj_max_x = ceil( $main_img_obj_w );
$main_img_obj_min_y = floor( $main_img_obj_h - $watermark_img_obj_h) ;
$main_img_obj_max_y = ceil( $main_img_obj_h );
break;
default:
$main_img_obj_min_x = floor( $main_img_obj_w - ($watermark_img_obj_w));
$main_img_obj_max_x = ceil( $main_img_obj_w );
$main_img_obj_min_y = floor( $main_img_obj_h - $watermark_img_obj_h) ;
$main_img_obj_max_y = ceil( $main_img_obj_h );
break;
}
------------------------------------------------------------------------------------
Теперь запустим и сможем увидеть наш водяной знак в разных местах защищаемой картинки.
 :::::  Сергей пишет 03.10.2011 @ 14:43 
Код давно уже был, а вот сдвинуть в угол всё никак не получалось.
Если кто знает как сделать буквы выпуклыми прям в самой картинке (как бы тенью выделяется)
напишите или скиньте ссылку в гостевую книгу.
Спасибо!
Имя:
Email:
URL

Введите сумму двух чисел девять и шесть (девять+шесть=?)
Запомнить мою информацию

* Html запрещен* Ваш E-mail опубликован не будет.

Copyright © 2000-2001 WebScript.Ru nas@webscript.ru
Design © 2001 by Parallax Design Studio (aka Spectator.ru)
Все торговые марки и авторские права на эту страницу принадлежат их соответствующим владельцам.
Сгенерировано за: 0.0240841