Наложение изображение на изображение php
Фотомонтажим на PHP
Возвращаясь к теме работы с изображениями в PHP, рассмотрим реализацию «смешивания» изображения из нескольких картинок, и способы практического применения такого трюка.
Постановка задачи
Итак, постановка задачи: предположим, на вашем сайте имеется галерея, и для навигации по ней вы (естественно) решили прибегнуть с списку thumbnails*, однако дизайн вашего сайта требует, чтобы картинки имели скругленные края, а также вы хотите, чтобы на каждой картинке стоял логотип вашего сайта.
thumbnails* — так принято называть уменьшенные копии изображения, которые применяются для предварительного просмотра в графических программах, файловых менеджерах а также на сайтах галерей. В переводе с английского дословно значит «ноготь большого пальца руки».
Если вы знакомы с основами работы в Photoshop (а скорее всего, так и есть), то делали бы вы это примерно так (см. схему):
* создали бы скруглённые углы
(с цветом фона по краям и прозрачной областью в середине)
* наложили бы полученую «маску» на исходное изображение
* если у вас непостоянный цвет фона на страницах, то вы также скорей всего указали бы цвет маски в индексе прозрачности
Однако, как видим, все эти операции можно отлично автоматизировать. То есть, в конечном итоге, от вас будет только требоваться создать саму исходную картинку. А уменьшение, и все вышеперечисленные работы проделает за вас скрипт, прямо во время обращения пользователя за этой картинкой на сайте. Кроме того, «генерация на лету» даст возможность чрезвычайно просто сменить обрамление всех картинок (например, оставить скругленными только два угла, или просто срезать уголок у картинки) а также поменять «наклееный» логотип, не перерисовывая при этом всех картинок.
Инструментарий
Теперь давайте выясним, что же есть в PHP для реализации нашего замысла.
Для наложения одного изображения на другое существует функция imagecopy():
Здесь, dst_im и src_im — идентификаторы изображений (соответственно, исходного и накладываемого), dstX и dstY — x,y-координаты на исходном изображении, куда будет вставлено накладываемое; srcX и srcY — x,y-координаты, от которых будет отсчитыватся вырезаемая область изображения-источника (размеры этой области задаются параметрами src_w и src_h).
Как видим, эта функция просто переносит изображение (или его часть) на другое изображение. Однако у нас есть также довольно полезная функция, которая делает это с изменением размеров изображения-источника — imagecopyresized(). Вот её общий вид:
Все параметры тут аналогичны предыдущей функции, плюс добавилась ещё одна пара чисел — dstW и dstH, которые задают размеры накладываемой области на изображении dst_im.
Также нам понадобится функция работы с прозрачностью изображения — imagecolortransparent (img, color). Она устанавливает указанный цвет, как прозрачный. Здесь всего два параметра: первый — это, как обычно, идентификатор изображения, второй — номер цвета в таблице цветов (как его достать — ниже).
Для большей совместимости мы будем работать с форматом PNG, т. к. формат GIF поддерживается не всеми версиями GD-библиотеки.
Пару слов о форматах. В интернете существует два формата, способных работать с прозрачностью: PNG (в двух стандартах — PNG-8 и PNG-24) и GIF. Исторически сложилось так, что формат GIF стал более популярен, чем его конкурент. Однако, более новый стандарт PNG более приспособлен к размещению изображений в интернете, в особенности — PNG-24, благодаря большей, чем в GIF возможной глубине (теоретически — до 48 бит, против 8) а также благодаря поддержке 8-битного альфа-канала.
(правда, как не обидно, самый популярный браузер Internet Explorer до сих пор (9 лет!) не поддерживает полностью формат PNG-24 (в частости, самую полезную его фичу — альфа-канал). Так что работать придется по старинке — PNG-8 и однобитной прозрачностью.
Как вы помните, идентификатор цвета можно получить несколькими способами. Уже известный вам способ — функция imagecolorallocate (img, a, b, c), которая добавляет в цветовую таблицу изображения img цвет RGB(a,b,c), если его там нет, и возвращает его порядковый номер из этой самой таблицы.
Другой способ получить номер цвета — это функция imagecolorat (img, x, y). Она возвращает номер цвета пикселя с координатами (x;y) (при условии, что изображение с индексироваными цветами, к которым как раз относятся форматы GIF и PNG-8)
Что ж, время переходить к примерам. Рассмотрим небольшой PHP-скрипт:
Как средствами php наложить одну картинку на другую?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
одну картинку наложить на другую
Добрый вечер, в заголовок вставляю картинку с градиентом, и сверху хочу наложить другую с городом.
Наложить одну картинку на другую под определенным углом
задание вроде того, что у фидле. нужно наложить одну картинку на другую, при том, что нижняя.
Можно ли средствами Qt наложить на видео картинку?
Нужно сделать программу, которая накладывает на видео вотермарк (для начала просто картинку) и.
Как сделать кнопку для перехода на другую страницу и что бы я мог на неё картинку наложить
Про href я знаю, а как картинку наложить на кнопку не знаю.
А сохранить прозрачный фон у накладываемой картинки как?
Добавлено через 33 минуты
Все, разобрался. использовал imagecopy. Но что-то качество наложенный картинки хромает.
Добавлено через 32 минуты
Выходит так, что качество конечной картинки автоматически меняется уже после слияния картинок и накладываемая так же меняет качество. Как-то можно сохранить качество накладываемой в конечном результате? А то если на основе особо не видна потеря качества, то на накладываемом изображении прямо таки разница существенна.
Лучше использовать вместо imagecopymerge, функцию imagecopyresampled, которая интерполирует значения пикселов без потери качества.
Наложение текста и картинок на изображение с помощью библиотек MagickWand и GD
MagickWand — одна из библиотек, осуществляющих доступ к пакету программ ImageMagic, для работы с изображениями в PHP. Рассмотрим особенности наложения текста и графики в ней. Говорят, что ImageMagic очень быстрый и дает результат лучшего качества (но не так распространен как GD). За одно проверим это.
Общий код скрипта будет таким:
Теперь рассмотрим подробнее код обработки изображения. Для примера, наложим текстовый копирайт на фотографию. Это можно сделать несколькими способами:
1. Наложим заранее подготовленное полупрозрачное изображение копирайта с помощью MagickCompositeImage
2. Наложим заранее подготовленное полупрозрачное изображение копирайта с помощью DrawComposite
В результате этих двух способов получилось следующее:
Время выполнения схоже. В первом случае скачет от 20 до 400мс. Возьмем абстрактное среднее значение 200мс. Во втором случае практически не зависит от величины изображения и других факторов и составило 160мс.
3. Сгенерируем текст копирайта и наложим с помощью MagickAnnotateImage
4. Тоже самое, но с помощью DrawAnnotation
В результате этих двух способов получилось следующее:
Надпись немного четче, но это скорее свидетельствует, о том, что фотошоп слишком размыл текст в файле-исходнике для первых способов.
По скорости способы идентичны. Время сильно скачет. Для мелких изображений составляет 20мс и доходит до 300мс в 2560×1600. Возьмем среднее значение 150. Опять же абстрактно.
Вывод: Для вставки копирайта с помощью MagickWand лучше всего подойдет способ с DrawComposite. Он универсален (можно вставлять не только текст) и работает предсказуемое время. Исходное изображение для него можно подготовить 3 или 4 способом.
GD Graphics Library с большой вероятностью стоит на любом сервере. В ней то же самое можно сделать так:
1. С помощью подготовленного изображения
2. Генерация текста средствами GD
Время работы в первом случае составило от 0,2 до 0,7 мс в зависимости от размера изображения, во втором — на 30% дольше.
Признаться, сам удивился, когда увидел, что GD работает чуть ли не в 1000 раз быстрее. Правда, замерял именно алгоритм обработки изображения, без открытий, сохранений и конвертаций в другой формат. Так же не учитывал объем занимаемой памяти, поэтому данные мало подходят для практического применения. Замер производительности целых функций с разными типами файлов показал, что на мелких файлах GD работает до 10 раз быстрее. Наиболее распространенные размеры (3–8 мегапикселей) библиотеки обрабатывают с одинаковой скоростью (справедливо только для моего хостинга). MagickWand (ImageMagic) любят за лучшее качество масштабирования. Опять же это справедливо только для сложных фотографий. Четкие контуры MW слишком размывает
Интересно, что вес такого png-изображения (справа) получился 1,2 КБ против 6 КБ у GD. А все от того, что GD не догадался поменять палитру на 8-битную.
Так что проверяйте скорость на своем хостинге (я тестировал на МакХосте), выбирайте качество исходя из ваших нужд и после этого отдавайте предпочтение той или иной библиотеке, а лучше подкиньте монетку 😉
Бонус
Немного о настройках качества
В MagickWand настройки качества задаются перед сохранением
85
1..100 — градация от ужасного качества до идеального
для png, т. к. это формат без потери качества, влияет только на вес картинки и, соответственно, время ее обработки сервером:
0, null — сжатие по умолчанию самое высокое (в этом случае вес картинки минимален)
1..80 — градация от низкой до высокой степени сжатия (но наибольшее сжатие при 0)
Еще в MagickWand можно указать вид компрессии, но в случае с jpeg, png, gif он ни на что не влияет. MagickSetImageCompression($image, MW_JPEGCompression);
В GD качество настраивается в сохраняющих функциях
для png:
null — сжатие по умолчанию 0 (плохое сжатие)
0..9 — градация от низкой до высокой степени сжатия. При значение 9 вес картинки получается примерно такой как при 0 в MagickWand