1. Вступ Добрий день. Постало завдання - показувати на сайті GIF-ку з текстом, який з часом повинен...
2. Основи створення нової GIF-ки
3. важливі особливості
4. результат

Вступ

Добрий день.

Постало завдання - показувати на сайті GIF-ку з текстом, який з часом повинен змінюватися. У разі статичного малюнка проблем немає, дивіться хоча б наш пост PHP-торт на день народження! , В якому розказано як писати текст, в тому числі Кирилицею, на зображенні з можливістю повороту і центрування його по потрібним осях.

Але на GIF'ке з декількома кадрами як ми текст напишемо? Треба доставити кожен кадр, оновлювати на ньому текст і збирати кадри в GIF-ку знову.

Ось наприклад дана нам така GIF-ка всього з 2-ма кадрами, закільцьованими, мінливими приблизно кожні 2-3 секунди:

Внизу ви бачите текст:

До закінчення акції: 3 дня Залишилося: 5 курсів

Відразу зрозуміло, що тут треба щодня міняти кількість днів, що залишилися. А кількість залишилися курсів може помінятися в будь-який момент часу, і тоді нам треба буде оновити картинку відповідно.

Що ж робити?

Як це зробити, запитаєте ви? GifCreator.php нам в руку, відповім я. Проект на GitHub'е тут: https://github.com/Sybio/GifCreator

За допомогою цієї невеликої ліби можна створювати GIF-ки на PHP своїми руками.

Пройдемося по циклу створення GIF-ки, а потім напишемо власний скрипт, який буде автоматично оновлювати нашу GIF-ку кол-вом залишилися до закінчення акції днів і кол-вом залишилися курсів.

Основи створення нової GIF-ки

Отже, процес створення GIF-ки за допомогою GifCreator такий:

Визначаємо масив, що містить в собі шляхи до файлів малюнків, GD Image-ресурсів (створеним за допомогою таких функцій як imagecreatefromjpeg і т.п.), а також сирими (raw) даними вмісту малюнків.
Наприклад:

$ Frames = array (imagecreatefrompng ( 'images / pic1.png'), // ресурс GD Image 'images / pic2.png', // шлях до малюнка на диску file_get_contents ( 'images / pic3.jpg'), // сире вміст малюнка 'https://mydom.ru/images/pic4.jpg', // URL-шлях до малюнка в мережі);

Далі визначаємо масив з тривалістю кадрів в мілісекундах.

$ Durations = array (40, 80, 40, 20);

Далі створюємо саму GIF-ку

$ Gc = new GifCreator \ GifCreator (); $ Gc -> create ($ frames, $ durations, 5);

Третій параметр методу .create () визначає кількість повторів кадрів GIF-ки. В даному випадку ми повторюємо кадри GIF-ки 5 разів. Можна задати 0 для нескінченного повтору.

І нарешті отримуємо результат:

Тепер ми можемо зберегти нашу GIF-ку на диску:

file_put_contents ( 'images / pic.gif', $ gif);

або вивести прямо в браузер:

header ( 'Content-type: image / gif'); die ($ gif);

важливі особливості

• Прозорість грунтується на першому фреймів і збережеться тільки в тому випадку, якщо ми задаємо фреймів з однаковою прозорістю.
• Розміри генерується GIF-ки також базуються на першому фреймів, тобто всі інші кадри будуть підігнані за розміром до нього.

Практика

Отже, ми робимо природний крок від теорії до практики. Візьмемо нашу задану спочатку поста GIF-ку і напишемо на ній актуальний на даний момент текст. Поїхали по кроках.

Перше, розбираємо GIF-ку на фрейми. Як це зробити, запитаєте ви. Без поняття, відповім я. Гоголь або Яндекс вам на допомогу.

Отримуємо наші заповітні фреймів:

У будь-якому тектсовом, ой, графічному редакторі очищаємо потрібні області від тексту, і зберігаємо результат в файліки Frame0.png і Frame1.png.

Результат може виглядати так:

Викладаємо файліки в заданий місце на сервер і пишемо наступний скрипт,
в коментарях до якого багато пояснюється, а пару моментів я дам нижче:

// Підключаємо клас створення GIF-ок include ( 'GifCreator.php'); // Визначимо скільки днів залишилося до закінчення акції // зараз $ datetime1 = new DateTime (); // до якого числа: виберемо випадковий проміжок 0 - 7 днів $ datetime2 = new DateTime (date ( 'Ymd', time () + rand (80000, 604800))); $ Interval = $ datetime1 -> diff ($ datetime2); $ Days_left = $ interval -> format ( '% d') + 1; // визначимо закінчення для слова ДЕНЬ (дня / днів / день) $ ln = substr ($ days_left, - 1, 1); // остання цифра числа if ($ days_left <21 && $ days_left> 4) $ days = 'днів'; elseif ($ ln> = 2 && $ ln <5) $ days = 'дня'; elseif ($ ln == 1) $ days = 'день'; else $ days = 'днів'; // скільки курсів залишилося mt_srand (time ()); $ Num = toZero (15 - mt_rand (0, 15)); // готуємо наші динамічні тексти, функцію Suffix дивіться внизу $ text1 = "До закінчення акції: $ days_left $ days"; $ Text2 = "Залишилося: $ num курс". Suffix ($ num); / * Для Кирилиці - використовуємо TTF-шрифти, Times New Roman Bold для даного прикладу. Шлях за замовчуванням для шрифту - в поточному каталозі. * / Putenv ( 'GDFONTPATH ​​='. Realpath ( '.')); $ Font = 'timesbd'; // назва шрифту без розширення ttf / * Розмір символів ($ size) і початкова координата по вертикалі ($ y), підбираються дослідним шляхом * / $ size = 11; $ Y = 310; // Відкриваємо перший Фрейм і додаємо тексти по центру внизу один під одним чорним кольором $ frame0 = imagecreatefrompng ( 'gif / Frame0.png'); $ Black = imagecolorallocate ($ frame0, 0, 0, 0); $ X1 = getX ($ size, 0, $ text1, $ font, $ frame0); $ X2 = getX ($ size, 0, $ text2, $ font, $ frame0); imagettftext ($ frame0, $ size, 0, $ x1, $ y, $ black, $ font, $ text1); imagettftext ($ frame0, $ size, 0, $ x2, $ y + 20, $ black, $ font, $ text2); // Теж саме робимо для другого фреймів, координата по X нам вже відома // Пам'ятаємо, що фреймів у нас повинні бути завжди одного розміру $ frame1 = imagecreatefrompng ( 'gif / Frame1.png'); $ Black = imagecolorallocate ($ frame1, 0, 0, 0); imagettftext ($ frame1, $ size, 0, $ x1, $ y, $ black, $ font, $ text1); imagettftext ($ frame1, $ size, 0, $ x2, $ y + 20, $ black, $ font, $ text2); / * Отже, додаємо створені нами кадри в масив і визначаємо тривалість затримки між кадрами в 2 секунди * / $ frames = array ($ frame0, $ frame1); $ Durations = array (200, 200); / * Створюємо GIF-ку, анімація зациклена (3-ий параметр в create () - 0) * / $ gc = new GifCreator \ GifCreator (); $ Gc -> create ($ frames, $ durations, 0); // Отримуємо GIF-ку і виводимо її в браузер $ gif = $ gc -> getGif (); header ( 'Content-type: image / gif'); die ($ gif); / * ******************************** Допоміжні функції ************** ****************** * / / * getX ($ size, $ angle, $ text, $ font, $ im) Центруем текст по осі X (горизонталі) на малюнку Вхід : @size - розмір символів тексту @angle - кут повороту тексту @text - сам текст @font - назва шрифту @im - ресурс GD Image Вихід: потрібна координата по осі X * / function getX ($ size, $ angle, $ text, $ font, $ im) {$ ts ​​= imagettfbbox ($ size, $ angle, $ font, $ text); $ Dx = abs ($ ts [2] - $ ts [0]); return (imagesx ($ im) - $ dx) / 2; } / * Повертає 0, якщо аргумент менше нуля, інакше - сам аргумент * / function toZero ($ val) {return ($ val> 0? $ Val: 0); } / * Повернути правильне закінчення слова `курс` в залежності від переданого числа Правильно для числа від 0 до 110 (> 100 треба допрацьовувати) @returns {String} закінчення * / function Suffix ($ num) {if ($ num> 10 && $ num <20) return 'ов'; // дивимося останню цифру $ n = intval (substr (strval ($ num), - 1, 1)); return $ n == 1? '': ($ N <5 && $ n> 0? 'А': 'ов'); }

Файл GifCreator.php з класом GifCreator можна скачати з GitHub'а - посилання я давав вище, або взяти з архіву з прикладами - посилання я даю нижче. 😉

Також при створенні картинок з текстом необхідно підключати потрібні шрифти, в даному прикладі ми підключили шрифт Times New Roman Bold з файлу timesbd.ttf. Шлях до файлу шрифту треба ставити або безпосередньо в імені шрифту, або через змінну оточення GDFONTPATH, як і показано в нашому прикладі. У Windows тут треба проявляти більшу обачність і обережність.

В даному прикладі мінливі дані для текстів ми створюємо рандомно, в реальних проектах вони звичайно ж обчислюються на основі реальних речей.

результат

Ось результат роботи нашого скрипта.

Зауважте, що при кожному оновленні сторінки напис буде змінюватися.

Також при натисканні на картинку вона оновиться і покаже нові написи, але не зловживайте цим, все таки хоч і мала, а навантаження на сервак сяке-таке створюється, так що варто напевно розглянути можливість кешування таких динамічно створюваних GIF-ок, особливо для сторінок з великими навантаженнями.

Завантажуйте повний робочий архів з усіма файлик ресурсів і скриптами звідси:
https://beotiger.com/download/gifcreate , Заварюйте міцний чай з вишневим варенням і насолоджуйтеся життям і класної погодою за вікном.

А мені залишається тільки розкланятися з вами, привітати з наступаючими святами і початком чемпіонату світу з футболу.

Вуаля, адью, гудбай, ауфідерзеен, до свиданья, чаю, поки.