Как вставить картинку в php

How to embed images in a single HTML / PHP file?

I am creating a lightweight, single-file database administration tool and I would like to bundle some small icons with it. What is the best way to embed images in a HTML/PHP file?

I know a method using PHP where I would call the same file with a GET parameter that would output hardcoded binary data with the correct header, but that seems a bit complicated.

Can I use something to pass the image directly in a CSS background-image declaration? This would allow me to utilize the CSS sprite technique.

Browser support isn’t an issue here, so more exotic methods are welcome also.

Работа с изображениями на PHP с использованием GD

Monty Shokeen Last updated May 28, 2022

Интернет будет довольно скучным без изображений. Тем не менее, поддержка и управление сотнями или тысячами изображений для вашего веб-сайта может быть головной болью. По мере изменения дизайна вашего сайта вам может потребоваться изменить все ваши изображения — например, преобразовать все ваши изображения в оттенки серого или изменить их размер до 50% от их первоначального размера. Вы также можете сжимать или обрезать разные изображения. Выполнение этого вручную занимает много времени и подвержено ошибкам, но с небольшим знанием программирования оно может быть автоматизировано.

В этом уроке мы узнаем о библиотеке GD (Graphic Draw) в PHP. Вы увидите, как эту библиотеку можно использовать для управления изображениями путем изменения размера, обрезки, поворота или фильтрации.

Что такое GD?

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

PHP может удовлетворить практически все ваши основные потребности в управлении изображениями, используя библиотеку GD — сокращение для Graphic Draw.

Установка

Если вы работаете в Windows, вы можете включить файл php_gd2.dll в качестве расширения в php.ini. Если вы используете что-то вроде XAMPP, вы найдете файл php_gd2.dll в каталоге xampp\php\ext. Вы также можете проверить, установлена ли GD в вашей системе, с помощью функции phpinfo(); . Если вы просмотрите полученный результат, вы найдете что-то похожее на следующее.

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

Создание изображений с помощью PHP GD

Первым шагом к манипулированию изображениями с помощью PHP является загрузка их в память в качестве ресурса изображения. Этого можно добиться с помощью различных функций для разных форматов. Все эти функции имеют очень похожие имена, поэтому их легко запомнить.

Создание нового изображения

Функция imagecreatetruecolor() окажется полезной, если у вас нет исходного источника изображения, которое вы хотите изменять. Она принимает два целочисленных параметра: ширину и высоту. Она вернет ресурс изображения, если все пойдет по плану. Возвращаемый ресурс изображения в основном представляет собой черное изображение с заданной шириной и высотой.

Загрузка файла изображения

Если вы планируете работать с изображениями, которые уже хранятся где-то, вам пригодится использование таких функций, как imagecreatefromjpeg() , imagecreatefrompng() и imagecreatefromgif() . Они создадут ресурс изображения со всеми данными из загруженного файла изображения. Эти функции принимают единственный параметр, который указывает местоположение загружаемого изображения, как URL-адрес или путь к файлу.

Создание изображения из строки

Библиотека GD также позволяет создавать изображения из строки, используя функцию imagecreatefromstring() в PHP. Помните, что вам нужно будет использовать base64_decode() для данной строки перед imagecreatefromstring() . Функция может автоматически определять, является ли тип изображения JPG, PNG, GIF или другим поддерживаемым форматом.

Вращение, масштабирование, обрезка и переворот изображения

Некоторые общие операции, которые вы можете выполнять на ресурсе изображения, — это вращение, масштабирование, обрезка и переворот.

Вращение

Вы можете повернуть изображение, которое вы уже загрузили в скрипт, используя функцию imagerotate() . Она будет вращать изображение под заданным углом, используя центр изображения в качестве центра вращения. Угол представлен как значение с плавающей точкой, и PHP считает, что это значение угла вращения. Иногда повернутое изображение будет иметь разные размеры по сравнению с исходной версией. Это означает, что после поворота вы получите некоторую открытую область. Третий параметр функции imagerotate() может использоваться для задания цвета фона пустой области после вращения.

Масштабирование

Очень просто масштабировать изображение с помощью библиотеки GD. Вам просто нужно передать ресурс изображения, а также ширину и высоту в функцию imagescale() . Если вы опустите высоту, GD будет масштабировать изображение до указанной ширины, сохраняя соотношение сторон. Вы также можете указать режим масштабирования изображения. Его можно установить в IMG_NEAREST_NEIGHBOUR , IMG_BILINEAR_FIXED , IMG_BICUBIC и т.д. Важная вещь, которую вам нужно запомнить, это то, что эта функция возвращает новый источник масштабированного изображения вместо того, чтобы изменять исходный.

Обрезка

Вы можете обрезать любой ресурс изображения с помощью функции imagecrop() в GD. Первый параметр — исходный ресурс изображения, а второй параметр — ассоциативный массив с ключами x , y , width и height , определяющий размеры позиции окна обрезки.

Изображение бабочки выше было обрезано с использованием следующего кода:

В основном, мы сохраняем длину самой маленькой стороны в переменной $size . Затем эта переменная используется для определения границы нашего прямоугольника обрезки. Наконец, изображение уменьшено таким образом, что оно составляет всего 300 пикселей в ширину и длину. Это дает нам квадратное изображение.

Переворот изображений

Изображения можно перевернуть горизонтально, вертикально или в обоих направлениях с помощью функции imageflip() . Она принимает ресурс изображения, который вы хотите перевернуть, в качестве первого параметра, и режим переворота в качестве второго параметра. Режим переворота может быть установлен на IMG_FLIP_HORIZONTAL , IMG_FLIP_VERTICAL или IMG_FLIP_BOTH .

Верхнее левое изображение на приведенном выше рисунке является оригиналом. Верхнее правое изображение было создано с помощью IMG_FLIP_HORIZONTAL , нижнее левое изображение было создано с использованием IMG_FLIP_VERTICAL , а нижнее правое изображение — с помощью IMG_FLIP_BOTH . (Изображение вороны от Pixabay.)

Применение фильтров к изображению

GD также имеет очень полезную функцию imagefilter() , которая может применять фильтры на разных ресурсах изображений, загружаемых с использованием функций из предыдущих изображений. Эта функция может принимать различные параметры в зависимости от применяемого фильтра.

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

• IMG_FILTER_NEGATE : обращает (меняет как в негативе) цвета на изображении
• IMG_FILTER_GRAYSCALE : удаляет цвет из изображения
• IMG_FILTER_BRIGHTNESS : делает изображение ярче или темнее
• IMG_FILTER_CONTRAST : увеличивает контрастность изображения
• IMG_FILTER_COLORIZE : оттеняет изображение в выбранный цвет
• IMG_FILTER_EDGEDETECT : выделяет края изображения
• IMG_FILTER_EMBOSS : похоже на обнаружение краев, но придает каждому краю приподнятый вид
• IMG_FILTER_GAUSSIAN_BLUR : размывает изображение с использованием метода Гаусса
• IMG_FILTER_SELECTIVE_BLUR : размывает изображение с помощью выборочного метода
• IMG_FILTER_MEAN_REMOVAL : эффект создания стилизованного изображения
• IMG_FILTER_SMOOTH : сглаживает зубчатые края изображения
• IMG_FILTER_PIXELATE : делает изображение пикселизированным

Некоторые фильтры, такие как NEGATE , GRAYSCALE , EDGE_DETECT и EMBOSS , не нуждаются в дополнительных данных. Другие фильтры, такие как BRIGHTNESS , CONTRAST и SMOOTH , могут принимать дополнительный параметр, который определяет количество яркости, контрастности или гладкости конечного изображения. Параметр PIXELATE позволяет указать два дополнительных параметра: размер блока, а также режим пикселизации. Наконец, фильтр COLORIZE принимает четыре параметра, которые определяют значения для red, green и blue компонентов, а также альфа-канала.

Изображение в левом верхнем углу является оригиналом. Верхнее правое изображение было создано с использованием фильтра COLORIZE , нижний левый был создан с использованием фильтра GRAYSCALE , а изображение в правом нижнем углу было создано с использованием фильтра BRIGHTNESS . (Это изображение бабочки было найдено в Pixabay.)

Другие полезные функции для работы с изображениями

Вы также должны знать о некоторых других общих функциях GD, которые могут быть полезны время от времени.

Получение размеров изображения

Вы можете определить ширину и высоту ресурса изображения с помощью функций imagesx() и imagesy() .

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

Сохранение изображения

После того, как вы внесете все необходимые изменения в изображение, вы, скорее всего, захотите либо вывести его в браузер, либо сохранить его как файл. В любом случае вам придется использовать одну из функций вывода GD, таких как imagejepg() , imagepng() или imagegif() . Вы передадите свой ресурс изображения одной из этих функций вывода, и если вы хотите сохранить изображение в файл, вы также укажете имя файла. Вы также можете управлять качеством выходного изображения с помощью третьего необязательного параметра в зависимости от типа изображения.

Изменение размера всех изображений в каталоге

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

Мы сохраним измененные изображения в новой папке под названием Resized. Все исходные изображения в этом случае имеют одинаковые размеры, но код будет работать правильно и с изображениями, имеющими разные размеры и пропорции.

В приведенном выше коде мы начнем с использования функции glob() , чтобы найти все изображения с расширением .jpg в каталоге под названием Nature. Файлы изображений хранятся в массиве, и мы поочередно перебираем их.

Поскольку все изображения, которые мы хотим изменить, являются JPEG, мы используем функцию imagecreatefromjpeg() , чтобы загрузить их в скрипт. Затем используется функция imagescale() для изменения размера изображения до определенной ширины — 640 пикселей в нашем случае. Мы не указали фиксированную высоту, чтобы высота была рассчитана автоматически.

К каждому из исходных файлов изображений было добавлено -1920×1080 к их имени файла, чтобы указать его размеры. Мы используем str_replace() в исходном имени файла и заменяем -1920X1080 на новый размер изображения.

Наконец, мы сохраняем измененные изображения в папке с именем Resize с новыми именами файлов. Вы также можете передать третий параметр функции imagejpeg() , чтобы установить качество сохраненного файла изображения. Если третий параметр опущен, изображения сохраняются с качеством по умолчанию 75.

Применение оттенков серого и контрастных фильтров для каждого изображения в каталоге

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

Как вы можете видеть, мы загружаем изображения из каталога Nature так же, как и в предыдущем примере. Однако на этот раз мы будем использовать функцию imagefilter() для применения фильтров на загруженном ресурсе изображения.

Обратите внимание, что imagefilter() изменяет исходное изображение и возвращает TRUE или FALSE в зависимости от успеха или провала операции. Это отличается от функции imagescale() , которую мы использовали в предыдущем разделе, которая вернула масштабированный ресурс изображения.

Еще одна важная вещь, которую следует иметь в виду, заключается в том, что контрастный фильтр принимает значения от -100 до 100. Отрицательные значения подразумевают большую контрастность, а положительные значения означают меньший контраст. Это противоположно тому, что могут ожидать некоторые люди! Значение 0 оставляет изображение неизменным.

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

Мы получаем имя файла из пути файла, используя функцию basename() , а затем сохраняем изображение с помощью функции imagejpeg() .

Заключительные мысли

Цель этого урока состояла в том, чтобы познакомить вас с библиотекой GD на PHP и узнать, как использовать все ее функции, чтобы сделать вашу жизнь проще. Вы можете использовать примеры в конце урока в качестве руководства для написания собственных скриптов работы с изображениями. Например, вы можете изменить размер изображения только в том случае, если оно больше заданного предела, определяя его ширину с помощью функции imagesx() .

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

Функция вставки изображения в PHP

Admin 08.09.2017 , обновлено: 09.09.2017 PHP, WordPress

В процессе вёрстки сайта на WordPress приходится вставлять изображения в PHP коде. Сложность заключается в том, что в echo нужно вставить другой php код.

Для этого я использую следующую конструкцию:

Если требуется автоматически вставлять в title и alt текущее названия раздела:

<?php
$img_url = get_bloginfo(‘template_url’) . ‘/assets/img/img.png’;
$title_attribute = single_cat_title( ‘Жанр ‘, », false );

В коде выше присваиваем переменной $img_url путь к файлу изображений, которое нужно вывести. Используется функция get_bloginfo(‘template_url’), которая указывает путь до шаблона WordPress.

PHP работа с изображениями. Библиотека PHP GD

PHP является мощным языком сценариев, и существует множество мощных плагинов. Одним из них является GD, который можно использовать для создания изображений на лету. GD, изначально разработанная Томасом Бутелем, безусловно, является самой популярной библиотекой обработки изображений для PHP (она также доступна для других языков, таких как Perl). GD входит в состав PHP начиная с PHP версии 4.3, поэтому вполне вероятно, что на вашем PHP уже установлен GD. Вы можете запустить phpinfo() , чтобы увидеть, установлен ли GD — на приведенном ниже экране показано, что он установлен.

Хотя возможность манипулирования и создания изображений скоро будет заменена HTML5, GD по-прежнему полезен во многих случаях. Например, чтобы предотвратить сохранение исходного изображения путем добавления водяного знака, поскольку PHP работает на стороне сервера, исходное изображение никогда не попадает на компьютер пользователя и никогда не будет в кеше пользователя.

Пример 1: Создание изображения

Ниже я создал изображение с использованием GD и вывел изображение в формате .jpeg. Я создал очень простое изображение размером 300×200 пикселей с красным прямоугольником в центре. Обратите внимание, что первый вызов imageColorAllocate() устанавливает цвет фона изображения.

Как встроить это изображение в HTML? Используйте тег
как обычно, но вместо того, чтобы устанавливать src с именем файла изображения, введите имя сценария с параметрами (GET), если необходимо. Например, приведенный выше скрипт называется example1.php, тогда тег будет выглядеть следующим образом:

Пример 2: Текст

Простейшее рисование текста можно сделать с помощью этой функции:

Где $fontId — это число от 1 до 5, если вы хотите использовать один из встроенных шрифтов GD. Вы можете загрузить шрифт и получить идентификатор, используя imageLoadFont() , если вы хотите более необычный шрифт.
В приведенном ниже примере я создал очень простое изображение размером 300×75 пикселей с синим текстом.

Пример 3: Параметры

Получение параметров на самом деле ничем не отличается от того, как вы это делаете с обычным PHP-скриптом, используя $ _GET или $ _POST (очевидно, вы не можете использовать POST при встраивании в тег , но вы можете это сделать, если используете формы).

Тег изображения ниже считывает текст из строки запроса (переменная $ _GET ):

Пример 4: Качество изображения

При экспорте в формат .jpeg качество изображения не очень хорошее. Чтобы это исправить, вы можете установить качество изображения в imagejpeg ($ image [, $ filename [, $ quality]]) . Имя файла может быть установлено в NULL, если вам это не нужно.

Ниже приведены два файла JPEG с качеством изображения, установленным на 50 и 100 (большее число обеспечивает лучшее качество, но больший размер файла). Основная часть кода такая же, как и выше, с основным отличием imageJpeg ($ image, NULL, 50) :

Пример 5: Обработка/манипулирование файлами изображений

Здесь мы демонстрируем, как загрузить файл изображения и обработать изображение. Для загрузки изображений есть несколько функций, в зависимости от типа файла: imagecreatefrompng() , imagefromjpeg() , imagefromgif() и так далее. В этом примере мы собираемся загрузить изображение, а затем повернуть его с помощью imageRotate() . На этот раз мы также выводим изображение в формате PNG, просто для демонстрации (формат ввода и вывода не должен совпадать).

Пример 6: Добавление водяного знака (Watermark) к изображениям

Для водяного знака рекомендуется использовать формат .png, поскольку он не ограничен 256 цветами, такими как GIF, и сжимается лучше, чем большинство .jpg.

Чтобы разместить водяной знак, вам необходимо получить размеры изображения с помощью функций imagesx($image) и imagesy ($ image) . В приведенном ниже примере я размещаю водяной знак в правом нижнем углу:

Очень нужная и удобная вещь phpFileManager. Это полноценный инструмент для управления файловой системой из одного файла с множеством функций и поддержкой русского языка. Это инструмент, предназначенный для быстрого управления файлами, а также для проверки конфигурации и безопасности PHP-сервера. Единственный PHP-файл Читать далее

На сегодняшний день Яндекс.Касса — это один из самых популярных мерчантов для подключения оплаты на любом сайте. Касса позволяет принимать платежи с помощью банковских карт и Яндекс.Денег, а так же подключить онлайн-кассу. Если у вас интернет-магазин на одной из популярных Читать далее

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

У инстраграма нет готового виджета для вывода постов на сайте. В прошлой статье мы рассматривали как создать Instagram виджет для сайта с помощью конструктора. Это самый простой и быстрый способ, и на мой взгляд самый лучший. Единственный его минус, как Читать далее

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

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

В этой статье рассмотрим как создать простого чат-бота для Viber, который будет принимать и отправлять сообщения в чат. Шаг 1 Итак, для начала необходимо зарегистрироваться в сервисе Viber Admin Panel по этой ссылке. Шаг 2 Создаём бота. Для этого заполняем Читать далее