Урок № 12 - GD - робота з зображеннями.
Можливості PHP не обмежуються створенням HTML # 'я. PHP можна використовувати для створення і маніпулювання зображеннями різних форматів, серед яких gif, png, jpg, wbmp, and xpm. Крім того PHP здатний виводити потік зображення прямо в браузер. Для роботи вам знадобиться PHP зібраний з графічною бібліотекою GD. GD і PHP можуть залежати і від інших бібліотек, в залежності від того, з якими форматами зображень ви будете працювати.
За допомогою розширення EXIF ви зможете обробляти інформацію, що зберігається в заголовках JPEG і TIFF зображень. За допомогою нього ви зможете отримати доступ до мета тегами генеруються цифровими камерами. Для роботи EXIF розширення бібліотека GD не потрібно.
Про встановлення та налаштування бібліотеки можна прочитати в офіційній документації. Скоріш за все вам це не знадобиться бо у вас все вже давно встановлено.
Функцій цих досить багато, і всі вони важливі. Описувати кожну я не буду, тим більше краще офіційної документації мені цього не зробити. Але подивитися на них з прикладами ми цілком зможемо, і зараз же цим займемося.
Нашою першою станцією буде 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
Як в принципі випливає з назви - функція малює лінію на зображенні.
Вдаватися в подробиці, про те, як це відбувається, ми не будемо. Ми просто намалюємо лінію.
// 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);
?>
Про виведення зображення в браузер і очищення пам'яті ми поговоримо пізніше, а поки подивимося з чим працює imageline.
bool imageline (resource $ image. int $ x1. int $ y1. int $ x2. int $ y2. int $ color)
Що є що ви можете здогадатися і самі, або підглянути в документації. Там є.
Я хочу щоб ви не боялися зробити щось не те. Дивіться в документацію і вперед.
Ще раз підкажу - якщо нічого не виходить, завжди можна задати питання на форумі =)
Функція працює з покажчиком на зображенням в пам'яті створеним imageCreateTrueColor і ідентифікатором кольору створеним imageColorAllocate.Нічего складно? Точно також працює велика частина функцій роботи з ізображеніямі.Прінімает покажчик на зображення, колір і якісь свої специфічні аргументи.
Встигнеш попрактикуватися в задачах. А далі ми розглянемо пару ключових функцій для роботи з зображеннями на прикладах, щоб надати тобі впевненості в роботі з ними =)
А тепер простими словами і по російськи:
Беремо вихідну картинку 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 ($ im)
Ну і нарешті останнє що ви зустрічали тут це 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
Очікувався покажчик а то що ви йому передали це рядок або щось інше. Причому якщо ти впевнений що передаєш покажчик, але все одно отримуєш цю помилку, то перестань припирати. Ти помиляєшся і краще все перевір. Заощадить багато нервів =)
# 65533; PNG? # 65533; # 65533; # 65533; IHDR # 65533; # 65533; # 65533;? # 65533; # 65533; # 65533; ??? # 65533; # 65533; # 65533; # 65533; # 65533; h6 # 65533; # 65533;? PIDAT (# 65533 ; # 65533; # 65533; # 65533; J? A? # 65533; # 65533; Mv # 65533; M4 # 65533; # 65533;
Ага, чому то виводиться бінарний код зображення а браузер не думав зробити з нього зображення, а обробив як звичайний текст. Ну-ка перегорнути ще раз весь урок і пошукай ту частину в якій ми відправляли зображення браузеру.
Пару задачок для засвоєння матеріалу
Ще раз нагадаю етапи програмування
1. Постановка завдання
2. Визначення необхідних операцій
3. Підбір відповідних функцій для кожної операції (так ось воно навіщо)
4. Побудова ланцюжка
5. Налагодження з поверненням до першого пункту
1. Накладення друку
Упевнений дописати на зображенні пару слів у тебе труднощів не складе. Тому спробуємо домалювати графічну підпис. Відкриваємо пеінт і робимо свій автограф. Вийшло? Відмінно.
Тепер зберігаємо з гугла дві фотки Памелли Андерсон і домальовує до них свій підпис.
(Підказка: напевно корисно знати що у зображення є такий параметр як Альфа - позначає прозорість. Упевнений Ctrl + F за списком функцій що кине вам в очі, хоча це зовсім не обов'язково.)
2. Captcha
Складну ми робити не будемо, зробимо просту. Кожен раз виводиться випадкові 4 цифри.
У чому прикол? Для цього будемо використовувати особливий шрифт - скачати який можна тут. А ще після того як наше зображення буде білого кольору з чорним текстом. ми застосуємо до нього фільтр негативу і на екрані зробимо так щоб воно відображалося навпаки, з чорним фоном і білим кольором і обидва зображення виводилися на екран. (І все в одному скрипті)
3. Логотип php
Це завдання простіше і достовірніше - намалюйте логотип php.
Відповіді на ці питання ви знайдете тут: тут