lamara-nsk.ru
Это блог о сео, деньгах, заработке в сети, разработке своих проектов, программировании
и "жизни программиста", бизнесе, блогосфере, фрилансе и многом другом.

Контакты, Реклама в блоге

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

Автор DimoninG, написано 01.09.2008

Рубрика на 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() никакого вывода в браузер быть не должно, иначе заголовок не отправится.

Удачи!

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

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

пишет:
01.09.2008 в 6:45 дп

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

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

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

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

пишет:
01.09.2008 в 11:03 пп

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

пишет:
02.09.2008 в 10:36 дп

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

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

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

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

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

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

Man,

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

DimoninG,

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

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

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

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

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

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

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

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

пишет:
03.09.2008 в 12:26 дп

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

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

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

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

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

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

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

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

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

пишет:
03.09.2008 в 3:42 пп

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

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

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

пишет:
03.09.2008 в 7:43 пп

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

пишет:
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 ???

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

пишет:
06.09.2009 в 2:36 дп

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

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

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

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