Конвертация HTML элементов в формат PNG без использования canvas

Быстрый ответ

Инструмент html2canvas позволяет простым и быстрым способом создать снимок HTML-контента. Данная библиотека захватывает элемент и трансформирует его в формат canvas.

html2canvas(document.querySelector('#capture')).then(canvas => {
    document.body.appendChild(canvas);
});

Данный код фокусируется на элементе с идентификатором id='capture', затем клонирует его в canvas, который впоследствии встраивается в тело документа. Учтите, что у html2canvas есть свои ограничения, особенно при работе с SVG и фоновыми изображениями.

Характеристики и ограничения доступных инструментов

Puppeteer — выбор профессионалов

Если приоритет находится в точности отображения, то наилучший вариант — Puppeteer, работающий на безголовом режиме Chrome. Он превосходно воспроизводит все детали HTML, в том числе сложные стили и JavaScript.

chrome --headless --screenshot --window-size=1280x1024 --no-sandbox --default-background-color=0 page.html

Командная строка обеспечивает возможность создания снимка 'page.html' с настраиваемым разрешением и прозрачным фоном.

Подробнее об этом расскажет наш спикер на видео

API для ускорения процесса

Если важна скорость выполнения, то стоит обратить внимание на API-сервисы такие как ApiFlash или EvoPDF, которые обеспечивают быстрое преобразование HTML в изображение. Однако, имея в виду частое использование, необходимо учитывать увеличение стоимости данных сервисов.

Преобразование SVG для XHTML

SVG в сочетании с тегом <foreignObject> дает возможность встроить содержимое XHTML и отрендерить его на canvas.

// SVG готов к своему дебюту!
var rawData = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.onload = function() {
    // Поза для фото!
    ctx.drawImage(img, 0, 0);
    canvas.toBlob(function(blob) {
        var imageURL = URL.createObjectURL(blob);
        var newImg = document.createElement('img');
        newImg.onload = function() {
            URL.revokeObjectURL(imageURL);
        };
        newImg.src = imageURL;
        document.body.appendChild(newImg);
    });
};
img.src = 'data:image/svg+xml;base64,' + btoa(rawData);

SVG — отличный инструмент для визуализации XHTML с помощью JavaScript и canvas.

Особенности процесса

Преобразование HTML в изображение требует учета определенных факторов, таких как стилевые ограничения, время загрузки контента и ограничения API.

Учет размера содержимого

Размер захватываемого содержимого должен соответствовать размеру элемента, даже если он меняется динамически:

// Настраиваем размер!
const dimensions = await page.evaluate(() => {
    const element = document.querySelector('#capture');
    return {
        width: element.offsetWidth,
        height: element.offsetHeight
    };
});
await page.setViewport(dimensions);

Это обеспечит создание идеально подогнанного изображения.

Учет задержек загрузки

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

// Терпение – залог успеха, дожидаемся загрузки
await page.waitForSelector('#capture', { visible: true });

Стили и шрифты

Важно обеспечить правильное отображение шрифтов и стилей, чтобы избежать несоответствий в различных средах.

Визуализация

Преобразование HTML в изображение напоминает фотосессию прекрасно поданного стола:

HTML: 📄 = Приготовление к празднику 🍽️🥂🌹
Фотография: 📸
Итог: 🖼️ = Кадр для альбома 📔

Как и в фотографии, инструмент захватывает эстетику вашего HTML.

Полезные материалы

1. Руководство по безголовому Chrome — основы работы с безголовым Chrome.
2. Захват экрана с помощью PhantomJS — превращение страниц в изображения с помощью PhantomJS.
3. Puppeteer — возможности Puppeteer, позволяющие автоматизировать работу браузера.
4. html2canvas — инструкции по использованию html2canvas.
5. Преобразование SVG-путей в WebGL | CSS-tricks — методы преобразования SVG в PNG с использованием WebGL.
6. Метод toBlob() элемента HTML2Canvas | MDN — преобразование canvas в изображение с помощью toBlob().
7. webshot – npm — модуль Node.js для превращения веб-страниц в изображения.