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

Question

Нужна помощь с изображениями.

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

Я понятия не имел, как это сделать, и подумал, что это будет лучшее место, чтобы узнать. Поскольку я понятия не имею, как это вообще называется, я не знал, что искать.

Спасибо заранее.

Answer 1

Было возможно с использованием API. Создал API базы данных, которую я хочу использовать, подключился к базе данных и все заработало! После использования $API_GET чтобы получить данные, я установил их в формат массива.

Использовал PHP для всего.

С тех пор я использовал imagecreatefrompng, очевидно, чтобы выбрать изображение. Установите несколько цветов, используя imagecolorallocate и оттуда это было просто добавление текста на изображении относительно того, где я хочу их использовать imagettftext,

Создание изображения с обновленной статистикой.

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

header( "Content-type: image/png" );

А также imagesetthickness до 5, затем imagepng а также imagedestroy,

Выдержки из кода:

$API_GET = file_get_contents("API URL");
$API_GET = json_decode($API_GET);
$API = array();

foreach ($API_GET as $key => $value) {
    $API[$key] = $value;
}
if (file_exists($imagefile)) {
    $bg_img = imagecreatefrompng ( "IMAGE URL");
    $color_red = imagecolorallocate( $bg_img, 250, 0, 0 );
    imagettftext($bg_img, 20, 0, 19, 36, $color_red, 'FONT URL.tff',"Text On Image");
    imagesetthickness ( $my_img, 5 );    
    header( "Content-type: image/png" );
    imagepng( $my_img );
    imagedestroy( $my_img );
} else {
    echo 'Image does not exist.';
}

Это основная структура кода. Спасибо за ваш ответ на вопрос.

Answer 2

Это решение html+css+ajax. Сделайте изображение фоновым изображением HTML-элемента. Давайте использовать div. Затем поместите текст в div. Используйте ajax для обновления текста. Изображение останется таким же, пока текст может быть обновлен.