Изображение с водяными знаками – как они это делают?

Рубрики: на PHP  

Все СЕОшники знают, что накладывать водяные знаки на картинки – это хорошо. Пользователи часто передают картинки «из рук в руки», например с целью «Посмотри, какой ржач!» или «Вот как круто выглядит процессор, который я купил!».

Где выгода нам? Если на картинке будет «водяной знак»… А, да – водяным знаком в Веб называется просто другое изображение, наложенное на данное изображение. Обычно водяным знаком является просто строка с адресом сайта, откуда это изображение было взято. В общем, мне уже не надо продолжать предложение «Если на картинке будет водяной знак, а картинка понравится пользователю, то он обязательно заглянет на Ваш сайт»?

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

Этот процесс можно автоматизировать, прикрутив автоматическое наложение водяного знака на изображение прямо во время загрузки. И я покажу как.

Для работы, как обычно, используется PHP, т.к. Ваш сайт наверняка нписан на нем. А для наложения графики будет использовать расширение PHP для работы с графикой. А именно – библиотека GD2. Включить ее в Windows можно, раскомментировав соответствующий модуль. В линуксе – перекомпилировав PHP с соответствующими флагами.

Я не буду вдаваться в саму библиотеку. Я приведу сразу код, а потом объясню, что он делает.


$znak_hw = getimagesize("znak.png");
$foto_hw = getimagesize("foto.jpg");

$znak = imagecreatefrompng  ("znak.png");
$foto = imagecreatefromjpeg ("foto.jpg");

imagecopy ($foto,
$znak,
$foto_hw[0] - $znak_hw[0],
$foto_hw[1] - $znak_hw[1],
0,
0,
$znak_hw[0],
$znak_hw[1]);

imagejpeg ($foto, "done.jpg", "100");

imagedestroy ($znak);
imagedestroy ($foto);

Библиотека GD2 очень сильно облегчает жизнь программисту, когда приходится работать с графикой. Сейчас поймете почему.

В каталоге со скриптом должны лежать еще 2 файла – foto.jpg (это изображение, НА которое нужно наложить водяной знак) и znak.png (это сам знак). Если Вы хотите, чтобы накладывалась, например, только надпись (без фона), то сделайте фон (все, что не является самим знаком) прозрачным (именно поэтому был выбран формат png).

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

После получения размеров, нужно создать в памяти интерпретатора сами изображения, чтобы было с чем работать (потом обработанное изображение записывается в файл). Для этого здесь нам нужны две функции imagecreatefrompng (читает формат png) и imagecreatefromjpeg (читает формат jpg, соответственно). Возвращает дескриптор изображение («ресурс», как принято называть его в PHP).

После того, как мы загрузили изображение в память, их можно начать обрабатывать. Здесь в качестве обработки выступает единственная операция – копирование одного изображение на другое (водяной знак копируется на фото). Для копирования мы используем функцию imagecopy, которая принимает следующие параметры: исходное изображение, копируемое на него изображение, координаты расположения копируемого изображения (два штука), и область самого копируемого изображения (четыре штука).

Координаты расположения копируемого изображение – это координаты левого верхнего угла копируемого изображения на фото. Здесь мы от размеров фотки отнимаем размеры знака и получется, что изображение копируется аккуратно в угол.

Размеры копируемого изображения остаются оригинальными – с левого верхнего его угла по правый нижний.

Следующим шагом нам нужно создать получившееся изображение. Мы создаем его с помощью функции imagejpeg, которая, соответственно, создает изображение в формате jpg.

Удаляем дескрипторы, чтобы не засирать память с помощью функций imagedestroy. Они не удаляют сам файл, не волнуйтесь.

Все, наше изображение готово. Интегрировать такую обработку очень просто. Нужно на этапе загрузки файла, обработать временное изображение (filename_tmp) и после этого скопировать его в уже каталог назначения.

И еще одна подсказка. Чтобы каждый раз не смотреть в файл, «что там у нас получилось», можно выводить изображение прямо в браузер. Так гораздо быстрее для отладки. Для вывода изображения в браузер закомментируйте строку

imagejpeg ($foto, "done.jpg", "100");

и напишите вот такой код вместо нее:

header ('Content-Type: image/gif');
imagegif ($foto);

Конечно, перед header() никакого вывода в браузер быть не должно, иначе заголовок не отправится.

Удачи! :)

Спонсор поста: недорогой хостинг


Отзывов (43) на «Изображение с водяными знаками – как они это делают?»

    Андрей пишет:
    01.09.2008 в 6:45 дп

    Спасибо, а я раньше в XnView в ручную их пририсовывал=)

    bishai пишет:
    01.09.2008 в 4:03 пп

    Я бы не рекомендовал накладывать водяной знак во время показа, лучше делать это во время загрузки изображения на сайт.

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

    Владимир пишет:
    01.09.2008 в 11:03 пп

    По-моему, стоит добавить в скрипт проверку размера изображения.
    Если изображение слишком маленькое водяной знак может легко его испортить.

    Сергей пишет:
    02.09.2008 в 10:36 дп

    Пользовался подобной штукой. Сразу скажу, что остановило: водяные знаки накладываются на все изображения в папке, даже на крошечные, по размеру меньше самого знака.
    Если бы можно было ввести ограничение на размер фото, чтобы знак накладывался только на изображение больше таких-то размеров, тогда было бы удобно.

    Man пишет:
    02.09.2008 в 11:29 дп

    header (‘Content-Type: image/gif’);
    imagegif ($foto);
    Спасибо! за поправку! сам никак не допёр до этого(

    DimoninG пишет:
    02.09.2008 в 12:29 пп

    bishai, не обижайтесь, но Вы постоянно невнимательно читаете статью. Я и не накладываю водяной знак при ВЫВОДЕ, я даже написал, в какой момент загрузки лучше всего наложить водяной знак.

    Владимир и Сергей – да, про проверку размеров я как-то забыл. Ограничение ввести очень легко, между прочим – достаточно просто проверить размеры самого фото и все.

    Man, :)

    bishai пишет:
    02.09.2008 в 7:22 пп

    DimoninG,

    >Этот процесс можно автоматизировать, прикрутив >автоматическое наложение водяного знака на изображение >прямо во время загрузки.

    Под этим я подумал Вы имеете ввиду загрузку изображения в браузере)

    Признаюсь, после это я поспешил сразу же дать совет. А дальше дочитал после него. О том, что я ошибся я не стал писать как было в каком-то посте.

    Постараюсь быть внимательнее.

    boberov пишет:
    02.09.2008 в 11:01 пп

    друзья, что-то я не пойму практической пользы, при таких колосальных усилиях???

    DimoninG пишет:
    02.09.2008 в 11:30 пп

    boberov, а что конкретно непонятно?..

    Секрет пишет:
    03.09.2008 в 12:26 дп

    Что скажу. Такими темпами скоро блоггеры начнут удалять форму для ввода урла. Ибо завуалированный спам нередко бывает. Изучают психологию, гады. В результате непонятно бывает, как вообще идёт обсуждение.

    Сорри конечно, что высказал это тут, а не у себя в блоге :).

    DimoninG пишет:
    03.09.2008 в 1:09 дп

    Секрет, ты прав. Что-то не подумал, что это спам. Боберов, Вы теперь без ссылки на имени, сорри.

    Кстати, замечено довольно много ручного спама :( Отстой.

    NoNaMe_909 пишет:
    03.09.2008 в 10:18 дп

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

    DimoninG пишет:
    03.09.2008 в 1:45 пп

    Я думал над таким плагином. Решил, что хороший вариант – если автор написал больше N плагинов, причем не тупых, тогда его ссылка видна. Иначе – нет.

    системы автоматизации пишет:
    03.09.2008 в 3:42 пп

    Скажите, я как понял это дело применяется в капче?
    Если да, то как это например реализуется на языке asp?

    DimoninG пишет:
    03.09.2008 в 4:52 пп

    системы автоматизации, идите-ка Вы нахуй. Следующий раз будет бан по IP. Думайте головой, в какой блог постите такой тупой спам.

    Владимир пишет:
    03.09.2008 в 7:43 пп

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

    NoNaMe_909 пишет:
    04.09.2008 в 6:00 пп

    >> системы автоматизации, идите-ка Вы нахуй. Следующий раз будет бан по IP. Думайте головой, в какой блог постите такой тупой спам. >>

    Патт сталом ))

    DimoninG, а Вы кстати, не создали еще тот плагин по отбору норм. камментов ?

    тема рулезная, т.к я заметил, даже на самых мощных новостных блогах людские камменты оставляют в основном одни и теже …

    DimoninG пишет:
    04.09.2008 в 7:16 пп

    Еще не создал. Пока руки не дошли :) Но уже нужно, я так понимаю. Кстати, пожелания по плагину можете написать ;)

    NoNaMe_909 пишет:
    04.09.2008 в 8:32 пп

    ИМХО, в плагине должна быть ручная правка листа френдов, т.е понравился каммент автору блога, поставил он плюсик камменту или в админке или прямо на самом камменте, хотя это наверное сложновато с точки зрения программирования… когда допустим блоггер получает 5 плюсов, то ссылка на блог автоматически высвечивается …

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

    p.s забыл кликнуть «я не робот», кликнул назад, а все пожелания остались в форме каммента, или ТС зачёт или Опера рулит :)

    NoNaMe_909 пишет:
    04.09.2008 в 8:36 пп

    + было бы не плохо выделять спамеров одним кликом, т.е видно, что чел бред несёт, 1 раз кликнуть, чтоб в BL попал, не заходя в админку и ляпота )))

    amxm пишет:
    21.09.2008 в 1:55 дп

    Интересная заметка, спасибо. Заходите и ко мне в гости ))

    seo пишет:
    26.12.2008 в 3:50 пп

    Пасиба, а то спам достал!

    Zen пишет:
    30.01.2009 в 1:58 пп

    добрый день, пытался использовать ваш код, но так, как я ноль в пхп у меня ничего не вышло((
    вот код, что я записал в файл:
    _____

    вот файл на который хочу наложить водяной знак _http://top.itk.sumy.ua/uploads/zen/informer.png

    вот сам водяной знак _http://top.itk.sumy.ua/uploads/zen/znak.png

    в чем моя ошибка??

    Zen пишет:
    30.01.2009 в 2:04 пп

    вот сам код : _http://top.itk.sumy.ua/uploads/zen/text.txt

    Zen пишет:
    02.02.2009 в 10:23 дп

    сорри, что надоедаю, но может Вы подскажете, в чем моя ошибка??

    DimoninG пишет:
    02.02.2009 в 11:08 дп

    Странно, я вроде отвечал. Видимо или забыл или не туда куда-то написал )
    В общем, попробуйте вывести изображение с помощью:

    header (‘Content-Type: image/gif’);
    imagegif ($foto);

    Если оно выведется, значит ошибка в сохранении. И убедитесь, что подключе и работает GD2, иначе толку от всего этого вообще нет.

    Zen пишет:
    02.02.2009 в 1:21 пп

    посмотрел в phpinfo
    пишет:
    GD Support enabled
    GD Version bundled (2.0.34 compatible)
    FreeType Support enabled
    FreeType Linkage with freetype
    FreeType Version 2.3.5
    это GD2 ???

    Zen пишет:
    03.02.2009 в 11:46 дп

    сделал, как вы посоветовали, выводит пустое изображение 0х0 пикс. что еще можно сделать??? плиз помогите очень нужно!!!

    DimoninG пишет:
    03.02.2009 в 11:51 дп

    Как минимум одна ошибка:

    imagecreatefromjpeg («/usr/local/www/apache22/data/uploads/zen/informer.png»);

    Создаете изображение для джпега, а сами укажываете файл png. Исправьте, посмотрим что будет.

    Zen пишет:
    04.02.2009 в 11:21 дп

    да, с jpg получилос,СПАСИБО. а можно на png накладывать водяной знак?? на(/usr/local/www/apache22/data/uploads/zen/informer.png) ????

    DimoninG пишет:
    04.02.2009 в 11:41 дп

    Само собой, для этого замените imagecreatefromjpeg на imagecreatefrompng

    strannik пишет:
    25.03.2009 в 12:11 пп

    Данный код никак не может претендовать на реализацию «водяных» знаков, ибо водяные, значит полупрозрачные. Иначе это получается просто лого, скопированное поверх изображения.

    А с водяными все гораздо сложнее, ибо в идеале нужно вручную обрабатывать альфа канал PNG24, ибо библиотека GD2 его нормально не поддерживает…

    DMF пишет:
    04.06.2009 в 7:07 пп

    Здрасте.
    А с помощью какой функции GD2 можно добавить графическую ссылку на изображение.
    Допустим, если взять ваш пример, чтоб при нажатии на водяной знак происходил переход по URL или запускалась какая либо функция.
    Извините, если это не относится к GD2, но очень интересует данный вопрос.
    Заранее благодарю.

    Sliper пишет:
    22.06.2009 в 5:07 пп

    Ссылку из GD2 низя, проще ручками…

    Меня другой вопрос волнует: а можно обычный текст с помощью этой библиотеки накладывать (не с изображения)?

    calc-x пишет:
    06.09.2009 в 2:36 дп

    «Меня другой вопрос волнует: а можно обычный текст с помощью этой библиотеки накладывать (не с изображения)?»

    Конечно – imagettftext() в помощь.

    Kosmo пишет:
    08.10.2009 в 7:00 пп

    я, как начинающий веб-программист, хочу вопрос задать.
    А если загружаемая картинка не одна, и на выходе также нужно получить не 1 картинку, а много?
    Каким образом это реализовать? :roll:

    acetw пишет:
    19.10.2009 в 1:42 пп

    через цикл for или while
    for ($i=1; $i < $j; $i++)

    acetw пишет:
    19.10.2009 в 1:45 пп

    через цикл for или while.
    короче написать не получилось ибо начал писать, нажал по привычке таб и энтер и результатом стало неполное сообщение))

    s_s пишет:
    23.10.2009 в 12:26 дп

    Классно, коротко и работает :lol:
    Спасибо!

    pessom пишет:
    03.03.2010 в 8:07 пп

    спасибо! оч. хорошая и подробная статья для новичков

    Small пишет:
    07.06.2010 в 2:50 пп

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

    Андрей пишет:
    27.11.2010 в 12:26 дп

    а если надо наложить знаки на картинки разных форматов. на несколько картинок одного формата я сделал(через for), а как сделать чтобы на разные форматы(png, bmp,jpg), просто интересно

    Viktor пишет:
    29.01.2011 в 3:08 пп

    Для пакетной обработки практически любых файлов
    http://nji9.net/download/graphic/graphic_1.html

Оставьте свой комментарий

Теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не спамер и не робот.
Я спамер и робот!
dimoning.ru
SEO и программирование.

  • Рубрики:



  • Рассылка:

    Подписаться на RSS-рассылку.



    Twitter.

  • Дополнительно:

  • По месяцам:

  • Счетчики:

    Яндекс цитирования

    • dimoning.ru © 2008-2011 г.
    Все материалы авторские, но их можно копировать с указанием прямой ссылки на источник.