php водяные знаки на лету
Создание водяных знаков с помощью PHP
Вступление
Для справки
альфа-канал (alpha-channel): часть изображения, хранящая информацию о прозрачности отдельных участков изображения, тогда как цветовые каналы хранят информацию о цвете изображения. В графических редакторах используется для маскирования (защиты от редактирования) некоторой области изображения. В некоторых приложениях они называются прозрачной маской.
Перед тем, как начать написание самого класса, рассмотрим функции, которые будут в нем использоваться. Вот их список:
Как можно увидеть, у php достаточно функций для работы с графикой. Пусть назначение некоторых из них и не совсем понятно в теории, но вот на практике все гараздо проще. Поэтому, чтобы разобраться, как с ними работать, применим их в нашем классе.
Выбор пути к цели
Сейчас, когда мы уже определились с целью нашего «мини-проекта», немного вернемся назад и поговорим о способах ее воплощения.
Потом нужно будет наложить наш водяной знак на исходное изображение. Для этого нам потребуется сложить цвета (математически) накладываемых изображений для получения третьего.
И в итоге, нам нужно будет отобразить полученное изображение в браузере. В данном случае рисунок будет открываться непосредственно из источника, указанного в теге » «
Следующим этапом будет написание кода функций класса «watermark». Дополняем файл «api.watermark.php» следующими строками кода:
Теперь подробнее рассмотрим функцию create_watermark().
Первым делом мы передаем ей три параметра:
Далее мы нам необходимо получить информацию об каждом из изображений. Нам это необходимо знать координаты X и Y для расположения водяного знака в центре исходного изображения.
Финалом будет отображения нашего модифицированного изображения в веб-странице, которая его запросит. Далее рассмотрим оставшиеся две вспомогательные функции.
Помимо функции create_watermark в нашем классе watermark присутствуют еще две функции. Продолжим исходный код класса следующими строками:
А теперь подробнее. Наша первая функция «_get_ave_color» принимает численные величины двух цветов и альфа-канала. Возвращает же она усредненную их величину. Эта функция нам необходима для определения цвета, который получится при наложении пикселей двух рисунков.
Вторая функция «_get_image_color» разбивает изображение на red (красный), green (зеленый) и синий (blue) составляющие (rgb-палитра). С помощью встроенных в php функций для работы с графикой (их описание было в начале статьи) получаем ближайшее значение цвета для нового изображения.
Ну вот, наш класс и почти готов. Осталось только заменить в функции «create_watermark» комментарий «некоторый код» следующими строками:
После написания такой значительной части кода можно сделать паузу и подробнее остановиться на его анализе.
Первым делом наш скрипт выполняет обход изображения с помощью двух циклов ‘for’. Параллельно еще подсчитываются координаты каждого пикселя водяного знака.
Далее производится поиск информации о RGB для каждого пикселя. Если текущий пиксел не находиться в области пересечения исходного изображения и водяного знака, то наш класс лишь дублирует пиксел для нового изображения. В случае расположения пикселя в области пересечения, нам необходимо определить его цвет как результат наложения исходного рисунка и водяного знака.
Для определения цвета области пересечения, сначала нужно получить значение RGB-переменной водяного знака, используя информацию, которую мы получили в циклах ‘for’. Потом с помощью функции «_get_ave_color» определяется среднее значение цвета для нового изображения. Далее следует функция «_get_image_color» для определения цветовой гаммы, которая будет использована функцией «return_img».
В итоге, после завершения работы циклов ‘for’ у нас есть готовое изображение с водяным знаком.
А теперь проверим наш класс в деле.
Для начала нам потребуются два файла. Первый назовем «watermark_test.php» и разместим в нем следующий код:
Назначения этого файла очень простое: он отображает в браузере исходное (main.jpg) и полученное (watermark.png, с водяным знаком) изображения.
Второй файл назовем «image.php» и и разместим в нем следующий код:
Ну вот и подобрались к финалу.
Для тех, кто хочет получить больше информации о создании изображений в популярных форматах, даю несколько ссылок:
Добавление водяного знака на фото средствами PHP
Если вы хотите добавить водяной знак на фото, не заморачиваясь с графическими редакторами или добавлять его во время загрузки фоток на сервер, то это урок для вас.
В этом уроке я покажу вам как добавить водяной знак на изображение на лету, фактически не изменяя исходное изображение. В первую очередь, вам понадобится изображение, которое вы будете использовать в качестве водяного знака.
Затем формируем заголовок файла:
Затем мы формируем png изображение и получаем его размеры:
То же самое сделаем и с оригинальным изображением, но только в формате jpg. Это обычное дело для фоток, которые загружаются через форму. Действуем следующим образом:
Теперь нам надо поместить водяной знак на изображение:
Затем настроим опции смешивания для обоих изображений:
В конце концов мы создаём новое изображение используя параметры:
Важно убрать за собой:
Для регулирования прозрачности водяного знака можно использовать Photoshop.
С теорией всё. Теперь применим наши знания в реальном проекте. Всё это необходимо сохранить в файл. К примеру под названием watermark.php
Теперь для того, чтобы показать фотку на которой будет водяной знак не изменяя исходное изображение, используйте следующий код:
Таким образом, мы передаём только имя изображения и получаем то что нам нужно, не изменяя исходное изображение.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.codeforest.net/add-watermark-on-image-using-php
Перевел: Станислав Протасевич
Урок создан: 26 Февраля 2011
Просмотров: 55396
Правила перепечатки
5 последних уроков рубрики «PHP»
Фильтрация данных с помощью zend-filter
Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.
Контекстное экранирование с помощью zend-escaper
Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.
Подключение Zend модулей к Expressive
Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.
Совет: отправка информации в Google Analytics через API
Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.
Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.
5 вариантов добавления watermark (водяной знак) на изображение, средствами PHP
Данный пост содержит пять примеров, вариантов, добавления водяного знака на изображение с помощью PHP. Думаю о пользе добавления watermark’а все в курсе, в первую очередь это своеобразная защита изображения от несанкционированного копирования его и последующее использование на других сайтах. Во вторых, добавление ненавязчивого водяного знака это хороший способ лишний раз прорекламировать свой сайт(бренд, фирму) пользователю, который не всегда читает текст, но всегда смотрит картинки.
Все примеры, скрипты использовались мною в разных проектах, часть их была найдена в сети, что-то было существенно переделано, что-то оставлено без изменений.
Пример 1. Данный весьма простой скрипт можно отнести к официальным примерам, он размещен на php.net. Все предельно просто. на одно изображение накладывается другое (PNG с прозрачностью).
Пример 2. Более удобен в использовании, т.к. представляет из себя функцию. Пример показывает как можно добавить watermark, просто написав нужный текст на изображении.
Параметры функции следующие
Пример вызова функции:
Пример 3. Не плохая функция, но работает с глобальной переменной хранящей адрес изображения которое будет накладываться на исходное (адрес watermark’а). Вариант на любителя.
Пример 4. Пример добавление водяного знака из 8 битного PNG файла. Оформлен в класс (автор посчитал это забавным).
Пример вызова функции:
Пример 5. Самый интересный пример, оформлен в PHP класс. Работает в PNG 24. есть возможность настройки параметров прозрачности. В интернетах этот вариант выкладывали и обсуждали не раз.
Пример вызова функции:
В заключении, хочется сказать, что все примеры по своему хороши. Некоторые подойдут и для крупных проектов, другие же выручат того, когда все нужно сделать быстро не тратя время на разборы. Надеюсь вам будет полезен данный пост.
Похожие записи
2 комментария to “5 вариантов добавления watermark (водяной знак) на изображение, средствами PHP”
Подскажите, пожалуйста, а как разместить текст водяного знака ровно по горизонтали и в правом нижнем углу. Спасибо.
Оставить комментарий
Друзья, всем привет!
Меня зовут Роман Чернышов, я веб-разработчик и данный блог посвящен моим проектам и бизнесу.
Тут я делюсь личным опытом
и отвечаю на вопросы. Я всегда готов к сотрудничеству с вами, готов реализовать проект любой сложности( опыт 10+ лет ).
Добавление водяного знака на все картинки сайта
От клиента пришла заявка, на старом сайте, обновить все изображения, а именно добавить на них водяной знак с логотипом. Проблема заключалась в том, что картинок было более 10000 штук и находились они в разных папках и под папках.
Мы решили написать универсальный скрипт, который можно запустить из консоли или прямо в браузере и обновить все картинки на сайте.
И так задача:
В процессе решения задачи, оказалось, что все картинки ещё и разного размера от 200 до 7000 пикселей по ширине, а водный знак в виде логотипа должен быть на всех.Как мы решали эту задачу:
Этап 1. Обойти все файлы
Сначала нужно узнать с чем мы будем работать, а для этого мы вывели на экран все файлы и папки, которые находятся в папку img на сайте.
И функция обхода всех элементов папки:
Как видно из листинга функция рекурсивная, в итоге работы этого скрипта на экране появиться множество строчек с абсолютными путями до файлов на сайте.
Единственное что тут не реализована, проверка на картинки, но она нам не пригодилась.
Этап 2. Воссоздать структуру папок
Так как у нас множество папок, с вложенными папками, и так до 10 уровня, для успешной работы всех функций копирования и перемещения файлов, нужна готовая структура.
Для этого мы определяем имя конечно папки и если её нет, то создаем:
Этап 3. Добавить логотип на картинки
Для этого будем использовать четыре стандартные функции: imagecreatefrompng, imagecreatefromjpeg, imagecopy, imagejpeg и парочку дополнительных типа: imagedestroy, imagesx.
Все это библиотека GD для PHP, подключена у всех по умолчанию и так:
Таким образом, после 3-5 минут работы скрипта, в зависимости от количества файлов, у нас получается копия всех изображений в папке img2, но логотип находится в правом нижнем углу, и на всех картинках имеет разный размер. Можно поиграться с цифрами в imagecopy но эффекта от этого не будет. Картинки разные, значит и водный знак должен быть разным, поэтому мы переходим к 4 этапу.
4 этап. Адаптация и выравнивание логотипа
Для этого нам понадобиться преобразовать, исходный логотип stamp.png до размеров картинки, на которой будем его размещать, и вклеить точно по её середине.
Приступим:
Если на этапе 3, в imagecopy в качестве размеров вставляемой картинки использовали imagesx($stamp), то здесь уже используем размеры нового логотипа imagesx($sim).
Логотип содержит отступы 10 пикселей слева и справа, и задается соответственно цифрами 20 и 10 в коде.
Этап 5. Добавляем функцию преобразования в наш цикл:
Так как скрипт собирался на коленке, естественно его можно ещё упростить и улучшить, ваши предложения в комментариях. Но вот уже рабочий вариант:
Его достаточно положить в корневую папку сайта, задать исходную и конечную папку с картинками и запустить, если картинок очень много. Добавить вначале:
И запускать из консоли, чтобы видеть этапы работы.
Мы использовали стандартный логотип компании с прозрачностью 60%.
Заключение
Когда папка с новыми файлами будет готова, Вам остается только переименовать её с img2 в img. В итоге у вас на сайте будет папка с исходными файлами, которые можно за архивировать или удалить и папка с помеченными логотипом фотографиями.
Данный скрипт актуально использовать на проектах, в которых уже загружены изображения товаров или статей, а возможности установить скрипт для добавления водяного знака нет, или вообще не предусмотрено.
Следующей задача, это заменить exif данные на всех картинках этого же сайта. Для чего это и как реализовали, расскажем в следующей статье.
Создание водяных знаков с помощью PHP
На данном этапе свеого развития PHP предлагает программистам широкий набор функций для динамической генерации изображения и работы с ними. В этой статье я покажу методику создания класса, который будет ставить водяные знаки на эти самые изображения.
Этот класс будет работать с двумя изображениями: исходное и водяной знак. Как дополнение, введен еще третий параметр — наш класс будет содержать альфа-переменную. Это позволит использовать для нашего водяного знака альфа-канал.
Для справки
Альфа-канал (alpha-channel): часть изображения, хранящая информацию о прозрачности отдельных участков изображения, тогда как цветовые каналы хранят информацию о цвете изображения. В графических редакторах используется для маскирования (защиты от редактирования) некоторой области изображения. В некоторых приложениях они называются прозрачной маской.
Информация, находящаяся в альфа-канале чаще всего представляет выделенные области — некоторые формы или расположение цветных областей. Сохранение альфа-канала в изображении увеличивает размер файла на 1/3. RGB изображения могут иметь до 24 альфа-каналов. Точечные и индексированные изображения не могут содержать альфа-каналов.
Часть первая — основы
Перед тем, как начать написание самого класса, рассмотрим функции, которые будут в нем использоваться. Вот их список:
Как можно увидеть, у php достаточно функций для работы с графикой. Пусть назначение некоторых из них и не совсем понятно в теории, но вот на практике все гараздо проще. Поэтому, чтобы разобраться, как с ними работать, применим их в нашем классе.
Постановка задачи
Сейчас, когда мы уже определились с целью нашего «мини-проекта», немного вернемся назад и поговорим о способах ее реализации.
Для начала, наше приложение получает два изображения — исходное изображения и сам водяной знак. Далее нам необходимо определить размеры этих изображений (width-ширину и height-высоту). Эти данные нам необходимы для расположения водяного знака в центре изображения (исходя из предположения, что размер водяного знака будет меньше самого рисунка).
Потом нужно будет наложить наш водяной знак на исходное изображение. Для этого нам потребуется сложить цвета (математически) накладываемых изображений для получения третьего.
И в итоге, нам нужно будет отобразить полученное изображение в браузере. В данном случае рисунок будет открываться непосредственно из источника, указанного в теге
Думаю, теории уже достаточно — ключевые моменты в ней раскрыты достаточно подробно. Теперь перейдем непосредственно к написанию скрипта.