HTML в зображення онлайн: як перетворити код або сторінку на PNG, JPG чи WebP

Автор:
HTML в зображення онлайн: як перетворити код або сторінку на PNG, JPG чи WebP

HTML / CSS у зображення онлайн

Введіть ваш HTML/CSS код або текст та згенеруйте якісну картинку в один клік

Живе прев’ю:

Браузер вже вміє малювати HTML, тож усе зводиться до того, щоб «сфотографувати» результат і зберегти його як картинку. Вставте код html в інструмент, оберіть формат і завантажте готове зображення. Решта статті про те, що може піти не так і як цього уникнути.

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

Перетворити HTML-код або веб-сторінку на зображення

Під капотом усе працює однаково. Браузер розбирає розмітку, будує DOM, застосовує CSS, малює піксельну картинку, а вона експортується у файл. Різниця лише в тому, хто саме «фотографує».

Є три шляхи.

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

Скриншот засобами браузера. Для живої сторінки, яку ви вже відкрили, окремий сервіс не потрібен (нижче покажу як).

Код у вашому проєкті. Якщо картинки треба генерувати автоматично, на сцену виходять бібліотеки та headless-браузер.

Як користуватися інструментом на цій сторінці:

  1. Вставте HTML із вбудованими стилями (<style> або style="") або завантажте файл.
  2. Перевірте прев’ю. Те, що ви бачите там, і піде в зображення.
  3. Оберіть формат і за потреби фон.
  4. Натисніть кнопку завантаження.

Одне правило заощадить купу часу. Усе, що має бути на картинці, має бути в самому коді. Зовнішній CSS-файл, шрифт із чужого сервера чи картинка за посиланням можуть просто не підвантажитися.

Конвертер HTML в зображення

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

Є два принципово різні підходи.

Перемальовування DOM. Скрипт читає елементи й стилі та малює їх на <canvas>. Так працює html2canvas. Його автори прямо пишуть, що це не справжній скриншот, а побудова зображення з доступної інформації, тому результат може відрізнятися від оригіналу. Підтримуються лише ті CSS-властивості, які реалізовано вручну.

SVG foreignObject. Бібліотеки типу html-to-image клонують елемент, вбудовують стилі, шрифти й картинки, загортають усе в SVG і розтеризують. Вони покривають більше CSS, але мають власні обмеження (про Safari нижче).

Справжній рушій браузера. Puppeteer та подібні інструменти запускають Chrome без вікна й роблять скриншот напряму. Це найточніший варіант, але потрібен сервер.

ПідхідТочністьДе працюєГоловний мінус
html2canvasСередня, лише частина CSSУ браузері користувачаНе вміє clip-path, perspective та інше
html-to-image / dom-to-image-moreВищаУ браузері користувачаУ документації заявлено, що Safari не підтримується
Puppeteer / headless ChromeНайвищаНа серверіПотрібна інфраструктура

Дані про підтримку CSS і Safari взято з документації самих бібліотек. Бібліотеки оновлюються, тож перед використанням перевірте свою версію.

Який формат обрати: PNG, JPG чи WebP

  • PNG без втрат якості, підтримує прозорість. Для інтерфейсів, тексту, логотипів, скриншотів коду.
  • JPG менший за розміром, але з втратами. Для фото та складних градієнтів, де прозорість не потрібна.
  • WebP сучасна альтернатива з параметром якості. Puppeteer, наприклад, підтримує png, jpeg і webp, причому якість (0–100) стосується лише двох останніх.

Моя порада. Якщо в картинці є текст, починайте з PNG. Артефакти JPEG навколо літер помітні навіть неозброєним оком.

Хочете прозорий фон? Тоді PNG і жодного background на body. У Puppeteer для цього є опція omitBackground.

Чому зображення не збігається з тим, що видно в браузері

Не підтримується частина CSS. Для html2canvas у списку підтримки transform позначено як «limited support». У тікетах проєкту користувачі повідомляють, що clip-path, perspective і transform: perspective не відтворюються. Складні 3D-ефекти краще замінити простішими або рендерити справжнім браузером.

Картинки з іншого домену. Згідно з документацією html2canvas, зображення мають бути з того ж походження, інакше потрібен проксі. Інакше на місці картинки може бути порожнеча.

Шрифти не встигли завантажитися. Бібліотеки вбудовують @font-face, але якщо шрифт підтягується з чужого джерела, результат може бути іншим. Надійний варіант: вбудувати шрифт у код або обрати системний.

Занадто велика картинка. За даними MDN, максимальний розмір canvas у Chrome та Safari 32 767 пікселів по стороні та 268 435 456 пікселів за площею (це 16 384 × 16 384), у Firefox площа більша (472 907 776). Реальні межі залежать від браузера, версії та пристрою, а мобільні можуть бути суворішими. Документація html2canvas окремо попереджає, що обрізаний або порожній canvas часто означає саме цей ліміт. Підозрюєте таку проблему? Зменште масштаб або розбийте довгу сторінку на частини.

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

Як зробити скриншот HTML-сторінки без жодних інструментів

Chrome та Edge мають це вбудовано в DevTools.

  1. Відкрийте DevTools.
  2. Натисніть Ctrl+Shift+P (на Mac Cmd+Shift+P) і введіть screenshot.
  3. Оберіть потрібне.

Доступні чотири варіанти. «Capture screenshot» знімає видиму частину, «Capture full size screenshot» усю сторінку разом із тим, що за межами екрана, «Capture node screenshot» лише вибраний елемент, а «Capture area screenshot» довільну ділянку.

Хочете картку чи блок окремо? «Capture node screenshot» ідеальний. Правою кнопкою по елементу в панелі Elements, і готово. Окремий конвертер для цього зайвий.

Для розробників: як зробити HTML у зображення кодом

Покажу два мінімальні приклади. Обидва відповідають офіційним описам API, але тестуйте їх у своєму оточенні.

У браузері, бібліотека html-to-image:

import { toPng } from 'html-to-image';

const node = document.getElementById('card');
const dataUrl = await toPng(node, { cacheBust: true, pixelRatio: 2 });

const link = document.createElement('a');
link.download = 'card.png';
link.href = dataUrl;
link.click();

На сервері, Puppeteer:

const page = await browser.newPage();
await page.setContent(html);
const image = await page.screenshot({ type: 'png', fullPage: true });

Про вибір інструмента. Хочете максимальну точність і маєте сервер? Беріть headless-браузер. Потрібно лише клієнтське рішення без серверу? html-to-image або dom-to-image-more.

Про wkhtmltoimage. Його часто радять у старих відповідях, але репозиторій wkhtmltopdf (куди входить і wkhtmltoimage) заархівовано власником 2 січня 2023 року, тобто проєкт більше не розвивається. Для нових задач я б його не обирав.

Типові помилки

  • Зовнішній CSS і шрифти. Підключили через <link>, а в картинці стилів немає. Вбудовуйте стилі.
  • Не задано розмір контейнера. Елемент без ширини розтягується на весь вікно, і картинка виходить не такою, як ви планували. Задайте width явно.
  • Забули про масштаб. Для чіткості на екранах із високою щільністю пікселів збільшуйте pixelRatio (або scale в інших бібліотеках), але пам’ятайте про ліміти canvas.
  • JPG для тексту. Див. вище.
  • Очікування, що URL чужого сайту «просто спрацює». Клієнтський скрипт упирається в політики безпеки браузера. Для живих сторінок потрібен серверний рендеринг.

Для чого це зазвичай використовують

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

Висновок

Якщо потрібна одна картинка зараз, вставте код в інструмент і завантажте PNG. Якщо виглядає не так, як у браузері, подивіться на CSS-ефекти, зовнішні ресурси й розмір. Для точності підійде скриншот у DevTools або серверний Chrome. А якщо автоматизуєте, обирайте інструмент під свої обмеження, а не «найпопулярніший».

Поширені запитання

Чи можна перетворити на картинку сторінку за URL?

Браузерні інструменти зазвичай працюють із кодом, який ви їм передали, а не з чужими сайтами, бо їх обмежують політики безпеки браузера. Для живої сторінки використовуйте скриншот у DevTools або серверний рендеринг.

Як отримати прозорий фон?

Експортуйте у PNG і не задавайте фон для body. У Puppeteer є опція omitBackground.

Чому картинка вийшла обрізаною або порожньою?

Найімовірніше, ви перевищили ліміт розміру canvas у браузері. Зменште розмір чи масштаб або розбийте вміст на частини.

Чи працює це в Safari?

Для частини бібліотек на основі SVG foreignObject (html-to-image, dom-to-image-more) у їхній документації прямо написано, що Safari не підтримується. Перевіряйте свій інструмент на потрібних браузерах.

Автор: Lumir

Дивіться також:

Швидко обрізати зображення онлайн безкоштовно

Повернути зображення онлайн

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

Конвертер зображень онлайн: змініть формат фото за хвилину

Схожі статті

Прокрутка до верху