Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

GD - работа с изображениями на строне сервера (PHP)

Лекция



Привет, Вы узнаете о том , что такое gd - работа с изображениями на строне сервера php , Разберем основные их виды и особенности использования. Еще будет много подробных примеров и описаний. Для того чтобы лучше понимать что такое gd - работа с изображениями на строне сервера php , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне сервера PHP (LAMP) NodeJS (Backend) .

Введение:

Возможности PHP не ограничиваются созданием HTML'я. PHP можно использовать для создания и манипулирования изображениями различных форматов, среди которых gif, png, jpg, wbmp, and xpm. Кроме того PHP способен выводить поток изображения прямиком в браузер. Для работы вам понадобится PHP собранный с графической библиотекой GD . GD и PHP могут зависеть и от других библиотек, в зависимости от того, с какими форматами изображений вы будете работать.

При помощи расширения EXIF вы сможете обрабатывать информацию хранящуюся в заголовках JPEG и TIFF изображений. При помощи него вы сможете получить доступ к мета тегам генерируемым цифровыми камерами. Для работы EXIF расширения библиотека GD не требуется.

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


С чем имеем дело

Функции обработки с изображениями в PHP я поделю на две категории. Те что работают с файлами и на те что работают с изображением в памяти(ресурсом).

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

И так, документация: http://ru2.php.net/manual/ru/ref.image.php. Да да, на ссылочку нужно нажать сейчас. Дальше пойдем по ней.

Нашей первой станцией будет imagecreatetruecolor.
Документация гласит Create a new true color image.Я уверен вы тоже всегда думали что цвета не настоящими быть не могут, и я тоже так до сих пор думаю =) True color на самом деле это название, метод представления и хранения изображения, позволяющий отобразить больш́ое количество цветов, полутонов и оттенков в RGB формате. Словечком напомню что RGB представлении от Red Green Blue это способ выразить любой цвет при помощи трех базовых цветов.

resource imagecreatetruecolor ( int $width , int $height )

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

Результат функция возвращает ресурсного типа данных.
Это значит что дальше мы работаем уже непосредственно с чем-то в памяти.

Дальше этот идентификатор мы передадим в другую функцию image colorallocate
Функция генерирует представления цвета в том виде, в который используется в картинке, для дальней работы с этим цветом на картинке.
Самый первый вызов этой функции задает фон изображения.

int imagecolorallocate ( resource $image , int $red , int $green , int $blue )
Три параметра нам известны. Числа от 0 до 255 выражающие цвет в системе RGB .
Для черного нам понадобится трижды 0, для белого трижды 255.
Первый же параметр функции resource $image это тот самый идентификатор, который мы получили ранее в imagecreatetruecolor . Параметр этот требуется для того, чтобы представление цвета соответствовало требованиями формата изображения. 

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

<?PHP 

// create a 100*100 image
$img = imagecreatetruecolor(100, 100);

// allocate some colors
$red = imagecolorallocate($img, 255, 0, 0);
$green = imagecolorallocate($img,   0, 255,   0);
$blue = imagecolorallocate($img,   0, 0, 255);

// draw some lines
imageline($img, 40, 30, 40, 40, $green);
imageline($img, 50, 30, 50, 40, $green);
imageline($img, 45, 38, 45, 39, $green);

imageline($img, 37, 45, 53, 45, $green);
imageline($img, 37, 43, 37, 45, $green);
imageline($img, 53, 43, 53, 45, $green);

// output image in the browser
header("Content-type: image/png");
imagepng($img);

// free memory
imagedestroy($img);
?>

                                                                           GD - работа с изображениями   на строне сервера (PHP)

О выводе изображения в браузер и очистке памяти мы поговорим позже, а пока посмотрим с чем работает imageline.

bool imageline ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color )
Что есть что вы можете догадаться и сами, или подсмотреть в документации. Там есть.
Я хочу чтоб вы не боялись сделать что-то не то. Смотрите в документацию и вперед.
Еще раз подскажу - если ничего не получается, всегда можно задать вопрос на форуме =)

Функция работает с указателем на изображением в памяти созданным imageCreateTrueColor и идентификатором цвета созданным imageColorAllocate.Ничего сложно? Точно также работает большая часть функций работы с изображениями.Принимает указатель на изображение, цвет и какие-то свои специфические аргументы.

Успеешь попрактиковаться в задачах. Об этом говорит сайт https://intellect.icu . А дальше мы рассмотрим пару ключевых функций для работы с изображениями на примерах, чтобы придать тебе уверенности в работе с ними =)

imagecopyresampled

bool imagecopyresampled ( resource $dst_image , resource $src_image , int $dst_x , int $dst_y , int $src_x , int $src_y , int $dst_w , int $dst_h , int $src_w , int $src_h )
Эта функция делает очень простую задачу. Вырезает прямоугольный кусочек из одной картинки, изменяет ее размер, сжимает или расширяет, растягивает или сужает и вставляет в новую картинку.
Это одна из самых дофига-аргументных функций и сейчас ты увидишь что даже тут все очень просто. 
resource $dst_image , resource $src_image - откуда и куда. Оба являются указателями на изображения в памяти.
int $dst_x , int $dst_y , int $src_x , int $src_y-как я уже сказал, функция вырезает прямоугольные части. Тут мы обозначаем левый верхний угол нашего прямоугольники в исходном изображении и ту же точку в новом изображении.
int $dst_w , int $dst_h , int $src_w , int $src_h - ширина и высота этого прямоугольника на новом изображении и ширина и высота прямоугольника вырезанного из исходного изображения.

А теперь простыми словами и по русски:
Берем исходную картинку resource $src_image , вырезаем из нее прямоугольник левые верхний угол которого в точке int $src_x , int $src_y а высота и ширина int $src_w , int $src_h. Все просто?
А теперь этот прямоугольник с изображением сжимаем, растягиваем, сужаем, расширяем так, чтобы его новые длина и ширина соответствовали int $dst_w , int $dst_h .
После чего этот новый прямоугольник вклиниваем на новое изображение в точке int $dst_x , int $dst_y.
У тебя будет возможность попробовать это чудо в действии чуть ближе к завершению.

imagecreatefromgif 
Этой функцией или ее подобными ты будешь пользоваться часто при работе с изображениями. Функция простая как грабли. Даешь ей название файла, она тебе выдает указатель на картинку в памяти с которым можно работать.
Обрати вниманием что эта createfromgif. Есть еще и другие форматы и для них уже другие функции. К примеруimagecreatefrompng или imagecreatefromjpeg.

Сохранение обработанного изображение осуществляется при помощи imagegif 
Описание гласит imagegif — Output image to browser or file. Для того чтобы примерно понять как это работает, нам понадобится редактор и картинка. Открываем картинку редактором и видим кучу непонятных символов.
Отлично, это наша картинка. Эта функция превращает пиксели в нашей памяти вот в такую запись. Для того чтобы записать все это в файл указываем в imagegif 2 параметра.Указатель на наше изображение в памяти и название файла.
imagegif($im,'image.png'); 

Когда браузер показывает нам какую нибудь картинку, он по сути запрашивает с сервера эти же каракули и превращает их на экране в изображение.
Значит мы можем не только сохранить эти каракули в файл, но и сразу отправить их браузеру. Делает это той-же самой imagegif, но на этот раз без второго параметра.
imagegif($im)

Но есть одно но. Нужно подсказать браузеру что это нужно обработать как картинку, а не как обычный текст. Напомню здесь о заголовках, рассматривавшихся в главе "Где работает php". 
Для того чтобы отправить заголовок мы используем функцию header
содержание заголовка будем (тип документа: картинка гиф)
выглядит это вот так: header("Content-type: image/gif");

Ну и наконец последнее что вы встречали тут это imagedestroy 
Переменную $img указатель она не удаляет, но память на которую переменная указывает она очищает. Пригодится если приспичит поработать с изображениями большой резолюции к примеру, с несколькими изображениями параллельно и при этом не выйти за рамки дозволенной свободной памяти.

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

Ну вот и все, теоретическую основу мы освоили..


Типичные ошибки:

Fatal error: Call to undefined function ... 
Это значит что у тебя не установлена библиотека GD или все гораздо проще - ты опечатался в названии функции. Установка GD описывается в документации. В денвере она есть по умолчанию, в убунту вам может пригодится команда sudo apt-get install php5-gd и перезапуск сервера.

Warning: imagecreatefrom..(a.png) failed to open stream: Permission denied
тут все тоже просто. Правой кнопочкой по нашему изображению и выставьте права на чтение всем.

На экран выводится Resource id # вместо картинки.
=( Я же уже говорил, что вывод в браузер осуществляется при помощи специальных функций вида imagegif() без второго параметра. А у вас где то стоит echo $img; и на экран выводится не содержимое памяти, а просто сообщение что это указатель.

Warning: ...(): supplied argument is not a valid Image resource
Ожидался указатель а то что вы ему передали это строка или что-то другое. Причем если ты уверен что передаешь указатель, но все равно получаешь эту ошибку, то перестань припираться. Ты ошибаешься и лучше все перепроверь . Сэкономит много нервов =)

�PNG  ��� IHDR�����������h6��PIDAT(����JA��Mv�M4��
Ага, почему то выводится бинарный код изображение а браузер не думал сделать из него изображение, а обработал как обычный текст. Ну-ка пролистай еще раз весь урок и поищи ту часть в которой мы отправляли изображение браузеру.


Пару задачек для усвоения материала

Еще раз напомню этапы программирования
1. Постановка задачи
2. Определение требуемых операций
3. Подбор подходящих функций для каждой операции (так вот оно зачем )
4. Построение цепочки
5. Отладка с возвращением к первому пункту

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

 

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


Задачки

1. Наложение печати
Уверен дописать на картинке пару слов у тебя труда не составит. Поэтому попробуем пририсовать графическую подпись. Открываем пэинт и делаем свой автограф. Получилось? Отлично.
Теперь сохраняем из гугла две фотки Памеллы Андерсон и пририсовываем к ним свою подпись.
( Подсказка: наверное полезно знать что у изображения есть такой параметр как Альфа - обозначающее прозрачность. Уверен Ctrl+F по списку функций что нибудь бросит вам в глаза, хотя это вовсе не обязательно.) 

2. Captcha
Сложную мы делать не будем, сделаем простую. Каждый раз выводится случайные 4 цифры.
В чем прикол? Для этого будем использоваться особый шрифт - скачать который можно тут. А еще после того как наше изображение будет белого цвета с черным текстом , мы применим к нему фильтр негатива и на экране сделаем так чтобы оно отображалось наоборот, с черным фоном и белым цветом и оба изображение выводились на экран.(И все в одном скрипте)

3. Логотип php
Это задание попроще и подлиннее - нарисуйте логотип php.

 

 


1. Наложение печати
Уверен дописать на картинке пару слов у тебя труда не составит. ПОэтому попробуем пририсовать графическую подпись. Открываем пэинт и делаем свой автограф. Получилось? Отлично.
Теперь сохраняем из гугла две фотки Памеллы Андерсон и пририсовываем к ним свою подпись.
( Подсказка: наверное полезно знать что у изображения есть такой параметр как Альфа - обозначающее прозрачность. Уверен Ctrl F по списку функций что нибудь бросит вам в глаза, хотя это вовсе не обязательно.)


2. Captcha
Сложную мы делать не будем, сделаем простую. Каждый раз выводится случайные 4 цифры.
В чем прикол? Для этого будем использоваться особый шрифт
А еще после того как наше изображение будет белого цвета с черным текстом , мы применим к нему фильтр негатива и на экране сделаем так чтобы оно отображалось наоборот, с черным фоном и белым цветом и оба изображение выводились на экран.(И все в одном скрипте)

3. логотип php
Это заданее попроще и подлинее - нарисуйте логотип php


Решения: 

1. Штамп
http://ru2.php.net/manual/ru/ima...es-watermark.php
PHP: 
 
  1. <?PHP
  2. // Загружаем картинку и печать
  3. $stamp = imagecreatefrompng('stamp.png');
  4. $im = imagecreatefromjpeg('photo.jpeg');
  5.  
  6. // Выбираем позции нашей печати на новом изображении. 10 пикселей от левого правого угла
  7. // что делают две других функции я уверен ты знаешь из документации
  8. $marge_right = 10;
  9. $marge_bottom = 10;
  10. $sx = imagesx($stamp);
  11. $sy = imagesy($stamp);
  12.  
  13. // Копируем печать на исходное изображение
  14. // Какие параметры и их значения ты поймешь пролистав доку. =)
  15. imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy -$marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));
  16.  
  17. // Выводим новое изображение и очищаем память
  18. header('Content-type: image/png');
  19. imagepng($im);
  20. imagedestroy($im);
  21. ?>
  22.  





2. captcha

PHP: 
 
  1. <?PHP
  2.  
  3. if( !isset($_GET['generate_image']) )
  4. {
  5.  ?>
  6.   <img src='?generate_image'><br>
  7.   <img src='?generate_image&inverted'>
  8.  <?PHP
  9.  die();
  10. }
  11.  
  12.  
  13.  
  14. $captcha = rand(1000,9999); // наше случайное четырех-значное число
  15. $img = imagecreatetruecolor(88,44);
  16.  
  17. $black = imagecolorallocate($img, 0, 0, 0);
  18. $white = imagecolorallocate($img, 255,255,255);
  19.  
  20. imagefill  ( $img  , 0  , 0  ,$white  );
  21. imagefttext  ( $img  , 16  , 0  , 5  , 15  , $black  , 'arial.ttf'  , $captcha  );
  22.  
  23. if( isset($_GET['inverted']) ) imagefilter  ( $img  , IMG_FILTER_NEGATE );
  24.  
  25. header('Content-Type: image/png');
  26. imagepng($img);
  27. imagedestroy($img);
  28.  


На тот случай если у вас не работает imagefilter http://ru2.php.net/manual/ru/fun...filter.php#79551

3. логотип
Ну самый простой вариант, ну или после протрезвения

Рисовать я пока не буду, но расскажу этапы.

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

В заключение, эта статья об gd - работа с изображениями на строне сервера php подчеркивает важность того что вы тут, расширяете ваше сознание, знания, навыки и умения. Надеюсь, что теперь ты понял что такое gd - работа с изображениями на строне сервера php и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне сервера PHP (LAMP) NodeJS (Backend)

создано: 2016-01-26
обновлено: 2024-11-14
199



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Поделиться:

Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей

Комментарии


Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Выполнение скриптов на стороне сервера PHP (LAMP) NodeJS (Backend)

Термины: Выполнение скриптов на стороне сервера PHP (LAMP) NodeJS (Backend)