В наше время многочисленные сайты создают страницы, которыми пользователи хотели бы делиться в разных социальных сетях или мессенджерах. Благодаря тегам Open Graph ссылки могут иметь красочное превью изображение, которое привлекает еще больше внимания, например, с помощью тега og:image.
Обычно многие веб-сайты не прикладывают особых усилий к предварительному просмотру изображений и просто добавляют одно изображение на большинство страниц. Если изображения нет, парсеры пытаются автоматически найти первое доступное подходящее изображение и использовать его.
Но представьте как бы было здорово иметь персонализированную картинку на странице, например, когда у вас есть профили ваших пользователей, или каких-то событий в которых они участвуют. Такая задача возникла и в нашем проекте, где мы хотели бы генерировать страницы с красочными изображениями которыми пользователи хотели бы делиться.
Например, посмотрите на картинку ниже которую мы генерируем для шаринга в социальных сетях. Тут есть кастомный шрифт, градиент, и даже локализация картинки на разные языки.
В нашем проекте первоначальные версии изображений создавались с помощью PHP, и какое-то время этого было достаточно, поскольку изображения были не очень сложными и содержали только картинку пользователя. Однако как только мы добавили имя пользователя, то уже сразу возникли проблемы с позиционированием текста. Возьмем для примера простой скрипт создания изображения на PHP.
Пример создания изображения на PHP
<?php
$width = 400;
$height = 200;
$image = imagecreatetruecolor($width, $height);
$backgroundColor = imagecolorallocate($image, 255, 255, 255);
imagefill($image, 0, 0, $backgroundColor);
$textColor = imagecolorallocate($image, 0, 0, 0);
$fontFile = 'path/to/your/font.ttf';
$language = isset($_GET['lang']) ? $_GET['lang'] : 'ru';
$text = getLocalizedText($language);
$fontSize = 24;
$textbox = imagettfbbox($fontSize, 0, $fontFile, $text);
$textX = ($width - ($textbox[2] - $textbox[0])) / 2;
$textY = ($height - ($textbox[5] - $textbox[3])) / 2 + ($textbox[5] - $textbox[3]);
imagettftext($image, $fontSize, 0, $textX, $textY, $textColor, $fontFile, $text);
header("Content-Type: image/png");
imagepng($image);
imagedestroy($image);
function getLocalizedText($language) {
switch ($language) {
case 'en':
return 'Hello, PHP!';
case 'fr':
return 'Bonjour, PHP!';
default:
return 'Привет, PHP!';
}
}Как видно из примера, если текст будет слишком длинный, то может уйти и за рамки изображения. А если сюда добавить градиенты, полупрозрачность, тени или что-то еще интересное, то код усложнится и поддерживать его будет не очень просто.
Все это приводит к тому, что затраты на изменение изображения требуют достаточно большого количества времени разработки.
Решение, о котором я хотел бы рассказать позволяет в разы сократить время разработки и упростить поддержку таких изображений. Более того - оно гибкое и очень легко масштабируется и для других вещей.
Для веб-разработчика HTML - это самый простой и удобный язык разметки. Вместе со стилями CSS вы можете создать гибкий интерфейс, учитывающий расположение любых элементов на странице — изображений, текста, таблиц, списков и т.д.
Давайте посмотрим и на примере ниже. Это простая HTML-страница со множеством стилей CSS, таких как градиент в тексте, тени, ограничение текстовых строк для длинного текста и другое.
Пример HTML кода для страницы профиля
html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
}
header {
position: relative;
}
header .emoji {
position: absolute;
top: -10px;
left: 0;
transform: rotate(20deg);
font-size: 3rem;
}
* {
box-sizing: border-box;
}
h1 {
text-transform: uppercase;
font-size: 3rem;
background: -webkit-linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.wrapper {
display: flex;
padding-top: 2rem;
}
.avatar {
display: flex;
justify-content: center;
align-items: center;
}
.avatar img {
width: 140px;
height: 140px;
border-radius: 100px;
border: 5px solid rgba(255,255,255, 0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.2);
object-fit: cover;
}
.content {
padding: 1rem 2rem;
}
.content .text {
font-size: 1.5rem;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: rgba(255,255,255, 0.8);
}
</style>
</head>
<body>
<div>
<header>
<h1>Hello, Javascript</h1>
<div class="emoji">?</div>
<header>
<div class="wrapper">
<div class="avatar">
<img src="https://sun9-57.userapi.com/impg/O3egMIWPZjhcKSThZ2hn7ByaQmET8ySOq5e4ww/O_ngP3qqEd8.jpg?size=1178x1789&quality=95&sign=71fcbf49ffff80fad9f0ef39f598cf69&type=album" alt=""/>
</div>
<div class="content">
<div class="text"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</div>
</div>
</div>
</body>
</html>Теперь все, что нам нужно, так это запустить веб-сервер, который может обслуживать этот HTML-код, и запустить приложение node.js с библиотекой Puppeteer, которая запускает headless версию Google Chrome, а затем вы можете сделать снимок экрана страницы и получить изображение.
Ниже приведен пример кода, который позволяет получить содержимое страницы с заданной шириной, высотой. Крайне важно обрабатывать исключения и закрывать страницы браузера, если что-то пойдет не так; в противном случае это может привести к утечке памяти.
import puppeteer, { Page } from 'puppeteer-core';
const width = 800;
const height = 600;
const deviceScaleFactor = 1;
const imageType = 'webp';
const imageQuality = 90;
const url = '<Путь к странице на веб сервере>';
// Путь к Chrome или Chromium
// На macOS путь до браузера будет таким "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
// на Linux Для Google Chrome будет "/usr/bin/google-chrome-stable"
const browserPath = '/usr/bin/chromium';
const browser = await puppeteer.launch({
headless: true,
ignoreHTTPSErrors: true,
executablePath: browserPath,
args: ['--no-sandbox', '--disable-setuid-sandbox'],
});
const page: Page = await browser.newPage();
await page.setJavaScriptEnabled(false);
await page.setViewport({
width,
height,
deviceScaleFactor,
});
try {
const result = await page.goto(url, {
waitUntil: 'load',
});
if (result?.status() !== 200) {
page.close();
throw new Error(`Incorrect status page ${result?.status()}`);
}
} catch (error) {
page.close();
throw new Error(error as string);
}
const data = await page.screenshot({
type: imageType,
quality: imageQuality,
encoding: 'binary',
});
page.close();В результате получается вот такое изображение, которое можно сохранить на диск или загрузить в свое S3 хранилище и предоставить его пользователям.
В нашем случае мы создали небольшое приложение node.js с Puppeteer, которое упаковано в контейнер Docker, и запускаем внутри него HTTP-сервер для управления запросами. HTML код мы генерируем с помощью серверного рендера React, в зависимости от переданных данных в запросе. В итоге приложение позволяет нам создавать изображения различного формата (например, png, jpeg или webp) для любой страницы веб-сайта. Также мы отключаем поддержку JS потому что отрисовкой занимается серверный рендер и экономим время загрузки страницы (нам нужны только картинки). С недавних пор мы полностью перешли на генерацию webp изображений и это позволило нам существенно сократить размер изображений и сделать градиенты (по сравнению с jpeg) более приятными.
В итоге, полная логика сервиса по генерации OG-изображений получилось такой:
Когда пользователь шарит где-то ссылку, то в
og:imageотдается специальная ссылка (с идентификатором его профиля, необходимым размером и расширением изображения) на прокси-сервер nginx.Прокси-сервер проверяет, находится ли изображение уже в хранилище S3 или нет.
Если изображение существует, оно отдается напрямую; в противном случае делается запрос к сервису node.js, который генерирует изображение, возвращает его и асинхронно загружает на S3.
Несмотря на незначительные технические трудности, новый сервис значительно сократил время на создание и поддержку изображений по сравнению с предыдущим подходом. Такое решение позволяет нам быстро обновлять изображения, просто меняя HTML-код, легко тестировать его в браузере и использовать все возможности CSS.
Само собой такой подход можно использовать и для создания любых других изображений как баннеры или даже, например, PDF файлов с описанием каких-либо товаров. Более того, для Puppeteer есть библиотека puppeteer-screen-recorder благодаря которой можно создавать видео ролики в которой анимация будет создана с помощью CSS. Это тоже может быть полезным потому что, например, iMessage умеет играть небольшие видео которые есть в метатеге og:video. Возможно в будущем мы увидим такую же возможность, например, и в Telegram.
import puppeteer from 'puppeteer';
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
function delay(time: number) {
return new Promise(function (resolve) {
setTimeout(resolve, time);
});
}
(async () => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.setViewport({
width: 640,
height: 480,
});
await page.goto('http://localhost:10001');
const recorder = new PuppeteerScreenRecorder(page, {
fps: 30,
videoCrf: 20,
videoFrame: {
width: 640,
height: 480,
},
});
await recorder.start('./simple.mp4');
await delay(500);
await recorder.stop();
await page.close();
await browser.close();
})();
В итоге получается вот такой ролик
Для удобства вот пример докер-контейнера, который мы используем со всеми необходимыми библиотеками для работы с изображениями.
Пример Docker контейнера
FROM node:18
RUN apt -y update \
&& apt -y install \
git \
openssh-server \
gconf-service \
libasound2 \
libatk1.0-0 \
libc6 \
libcairo2 \
libcups2 \
libdbus-1-3 \
libexpat1 \
libfontconfig1 \
libgcc1 \
libgconf-2-4 \
libgdk-pixbuf2.0-0 \
libglib2.0-0 \
libgtk-3-0 \
libnspr4 \
libpango-1.0-0 \
libpangocairo-1.0-0 \
libstdc++6 \
libx11-6 \
libx11-xcb1 \
libxcb1 \
libxcomposite1 \
libxcursor1 \
libxdamage1 \
libxext6 \
libxfixes3 \
libxi6 \
libxrandr2 \
libxrender1 \
libxss1 \
libxtst6 \
ca-certificates \
fonts-liberation \
libappindicator1 \
libnss3 \
lsb-release \
xdg-utils \
wget \
curl \
libnss3-dev \
libgbm-dev \
libu2f-udev \
udev \
libvips \
chromium
# Добавьте нужные вам шрифты
COPY ./fonts /root/.fonts
RUN fc-cache -fv
# Сборка вашего проекта
...
# Запуск приложения
CMD ["node", "app.js"]