Якщо ви завзятий PHP розробник, ви, напевно, не тільки чули про графічної бібліотеці GD library. Для тих, хто з нею не знайомий, пояснюю GD library дозволяє створювати зображення, видозмінювати і управляти ними без особливих зусиль. Сьогодні, ми познайомимося з азами використання в PHP графічної бібліотеки GD library.
Переконайтеся, що GD бібліотека встановлена і активована на вашому сервері. Не знаєте як це зробити? Не переживайте, все просто! Вам тільки потрібно створити PHP файл на сервері, а потім введіть наступне:
Тепер відкрийте сторінку браузера і ви побачите величезний список можливостей вашої версії PHP. Прокрутіть сторінку трохи вниз, знайдіть секцію 'GD' і переконайтеся, що бібліотека підключена. Якщо немає, зв'яжіться з компанією, що надає вам послуги хостингу. На щастя, на більшості серверів, на яких я вже встиг попрацювати і працюю, GD бібліотека встановлена і підключена.
Давайте пройдемося по деяким основним моментам. По-перше, зробимо так, щоб всі звіти про помилки видавалися браузером. Цього можна домогтися, ввівши в самому початку вашого php-коду наступне:
Давайте почнемо з найпростішого і намалюємо за допомогою PHP синій квадрат - нічого надприродного, звичайно, але треба ж розібратися з основами. Щоб отримати бажаний квадрат, необхідно виконати наступні дії:
• Встановити тип вмісту як «зображення», щоб браузер зміг інтерпретувати зображення належним чином;
• Створити нове пусте зображення, встановивши потрібну ширину і висоту;
• Зробити колір фону синім;
• Зберегти остаточний варіант зображення і передати його в браузер;
• Очистити пам'ять, яка використовувалася для створення і зберігання зображення;
• Організувати відображення малюнка з файлу index.php
Тепер давайте розглянемо всі використані функції і кожен крок вищенаведеного коду, щоб краще зрозуміти, що саме ми в ньому робимо:
• Як я вже пояснював, ми додаємо опцію повідомлення про помилки, щоб в разі необхідності швидко їх виправити
• Потім ми використовуємо функцію header (), щоб встановити тип вмісту - png
• Зберігаємо зображення і встановлюємо необхідну ширину і висоту - детальніше див. Imagecreate ()
• Потім використовуємо функцію imagecolorallocate, щоб вибрати синій колір для фону нашого малюнка. Зверніть увагу, що в остаточному варіанті буде видно колір, встановлений в першу чергу, так що наш квадрат вийде синім, а не червоним.
• Для остаточного збереження малюнка ми використовуємо imagepng (). Якщо ви бажаєте зберегти малюнок в будь-якому каталозі, слід ввести додаткові параметри.
• І, нарешті, ми чистимо пам'ять за допомогою функції imagedestroy ()
Ми можемо подивитися на намальований нами квадрат, відкривши файл blue_square.php, а, ще краще буде, якщо ми встановити посилання на нього на головній сторінці:
Якщо все було зроблено правильно, ви побачите ось такий синій квадрат:
Тепер, коли ми навчилися створювати зображення, давайте спробуємо зробити зображення з текстом, написаним обраним нами шрифтом. Ми можемо скористатися будь-яким шрифтом з каталогу TrueType Font (.tff). У наступних прикладах я буду використовувати шрифт 'Advent'. Давайте напишемо «Hello World» на темно-сірому квадраті. Увага, дивимося на код, а потім детально розбираємо кожен крок.
Збережемо код у файлі 'hello_world.php'і будемо відкривати його таким же способом, який був зазначений вище. Отже, що тут нового?
• Ми встановили розмір зображення 300 * 300 пікселів і використовували темно-сірий фон
• Зверніть увагу, як ми вказували шлях до шрифту, використовуючи ім'я шрифту: справа в тому, що далі в коді нам доведеться накладати текст на зображення. Крім того, не забувайте, що ім'я шрифту пишеться без розширення. Втім, це залежить від того, скільки разів GD-бібліотеки використовує PHP: якщо назвою шрифту не починається з '/', то буде потрібно розширення ttf - тобто, якщо перед назвою файлу нашого шрифту не варто /, то в кінці буде автоматично додано ttf .
• Потім ми пишемо «Hello World!» І зберігаємо текст для подальшого використання
• Найважливіша функція, використана в цьому коді - це imagettftext (), що вимагає вказівки 8 параметрів: шлях до зображення, розмір зображення, кут нахилу, вісь x, вісь y, колір, шрифт, текст (у такому порядку)
Збережіть код, відкрийте його будь-яким способом, і ви побачите ось таку картинку:
Ви помітили, що у функкціі imagettftext, що з'єднує текст і картинку, є параметр розташувати під кутом '? Значить, ми можемо повернути наш текст під будь-яким кутом. Давайте перепишемо код і повернемо рядок на квадраті.
Зверніть увагу, ми встановили значення -45 градусів замість 0 градусів (як в попередньому прикладі) - це все, що потрібно для того, щоб повернути текст. Подивіться на зображення.
Ну як? Цікаво? Ні? Тоді давайте спробуємо зайнятися чим-небудь більш практичним.
Яке сьогодні число?
Ми можемо не тільки самі малювати картинки, а й використовувати готові! Трохи кодування, і у нас вийде календарик, що відображає поточну дату (місяць, день і рік). Шукаємо в Google заготовку для календаря, знаходимо зображення в форматі .svg - я змінив його розмір і перевів у формат png. Подивіться на заготовку:
Тепер у нас є основа, і ми можемо обробити її за допомогою функцій GD і PHP. Попереджаю, що я не претендую на звання найбільшого в світі дизайнера - можливо, на сайті краще виглядала б інша заготовка і інший шрифт. Так що дизайн за вами, а поки давайте подивимося на код:
Отже, що ми тут робимо? Що за функція list ()? Давайте розберемося:
• Як завжди, ми встановлюємо тип вмісту, щоб картинка відображалася правильно.
• У 10-му рядку ви бачите функцію list function. Ми визначаємо формат дати за допомогою функції explode () і зберігаємо його. Таким чином можна впорядковувати будь-яку інформацію. Тепер нам відкритий доступ до відомостей про поточному місяці, дні і рік.
• У рядках 22-24 ми користуємося функцією imagettfbbox (), щоб організувати формат дати. Функція забезпечує відображення дати в заданому порядку, а для доступу до правого нижнього кута ми пишемо $ pos_month. Все це потрібно для того, щоб текст автоматично розташовувався правильно, не залежно від його розміру.
• Потім ми створюємо кожен рядок по черзі і встановлюємо розмір тексту по осі Х.
Якщо не відбулося ніяких катастроф, у вас повинна вийти представлена нижче картинка, з тією лише різницею, що дата буде тією, що встановлена на вашому комп'ютері - мій малюнок, як ви можете здогадатися, є статичною. За допомогу зі скриптом спасибі сайту catpin.
Кішки і фільтри зображень
Останнє, чого я сьогодні вас навчу, це фільтри зображень - дуже цікава штука, повірте мені. Функція imagefilter () бере готове зображення і певним чином змінює його - наприклад, переводить в чорно-білий режим. Давайте подивимося на картинку, з якої ми будемо працювати, в її первісному вигляді.
А тепер зробимо кота чорно-білим за допомогою функції фільтрації зображень.
Вищенаведений скрипт є досить гнучким, так що ви без зусиль зможете зробити будь-який малюнок чорно-білим - ось так:
Ставимо в «джерело» будь-яку картинку, і незабаром вона стане чорно-білою. Тим, хто планує використовувати цю функцію на загальнодоступних серверах, будуть потрібні додаткові заходи безпеки. Хоча у вищенаведеному скрипті зазначено зображення типу .jpeg, ви можете застосовувати функцію для обробки будь-яких графічних файлів. Тепер наш кіт виглядає так:
На завершення уроку я познайомлю вас з деякими іншими графічними фільтрами і результатами їх застосування
За яскравість зображення відповідає третій параметр:
Розмивання по Гауса, ніяких додаткових параметрів
Третій параметр визначає контрастність
Видалення середнього значення (ефект малюнка)
Ніяких додаткових параметрів.
Встановлює значення червоного, зеленого, синього кольорів, а також альфа-каналу (за бажанням) в перерахованому порядку
До нових зустрічей.
5 останніх уроків рубрики "PHP"
Коли мова йде про безпеку веб-сайту, то фраза "фільтруйте все, екрануйте все" завжди буде актуальна. Сьогодні поговоримо про фільтрації даних.
Expressive 2 підтримує можливість підключення інших ZF компонент за спеціальною схемою. Не всім подобається це рішення. У цій статті ми розповімо як поліпшили процес підключення декількох модулів.
Припустимо, що вам необхідно відправити якусь інформацію в Google Analytics з серверного скрипта. Як це зробити. Відповідь в цій замітці.
Підбірка з декількох видів PHP пісочниць. На деяких ви в режимі online зможете потестить свій код, але є так само рішення, які можна впровадити на свій сайт.
riddickfmi
Motorchiknp
все погано! Начебто не криворукий, але картинка з "hello world" і довше не виходить :( не зрозумію в чому справа :( код скопіював один до одного може там помилка є?
Motorchiknp
Вибачте, запрацювало! Ще не додав шрифт в папку не працював!
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!