1. Продукти
  2.   Зображення
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

Безкоштовний API зображень Node.js для перетворення HTML у зображення

Бібліотека обробки зображень Node.js з відкритим вихідним кодом Повністю підтримує завантаження та перетворення зображень, розробники можуть перетворювати вміст HTML у зображення (JPEG, PNG, GIF) у програмах Node.js.

У світі веб-розробки, що швидко змінюється, можливість конвертувати HTML у зображення відкриває світ творчих можливостей. Незалежно від того, чи йдеться про створення графіки соціальних мереж, створення візуальних звітів або розробку спеціального вмісту для електронних листів, перетворення HTML на зображення може оптимізувати багато процесів. Бібліотека Node-HTML-to-Image — це інструмент із відкритим кодом, який дозволяє розробникам робити саме це, надаючи простий спосіб генерувати зображення з HTML за допомогою Node.js. Розробники програмного забезпечення можуть створювати приголомшливі візуальні ефекти, генерувати мініатюри та навіть автоматизувати завдання, які потребують створення зображень. У бібліотеці є кілька важливих функцій, таких як створення нових зображень, завантаження HTML із зовнішнього джерела та перетворення його на зображення, додавання власних CSS і JavaScript, створення кількох зображень одночасно тощо.

Бібліотека Node-HTML-to-Image неймовірно проста у використанні та дозволяє розробникам програмного забезпечення завантажувати та перетворювати рядки HTML або файли у високоякісні зображення лише за допомогою кількох рядків коду. Ця бібліотека, розроблена Frinyvonnick, використовує потужність Headless Chromium через бібліотеку Puppeteer для перетворення HTML і CSS у зображення PNG, JPEG або навіть WebP. Це дозволяє розробникам створювати зображення, які відображають всю візуальну складність HTML, включаючи підтримку сучасних CSS, шрифтів і навіть виконання JavaScript. Ви можете налаштувати вихід, вказавши такі параметри, як якість зображення, ширина та висота. Крім того, користувачі можуть витягувати зображення з веб-сторінок, що дозволяє їм створювати потужні програми для копіювання веб-сторінок. Завдяки її гнучкості, настроюваності та простоті використання не дивно, чому розробники скупчуються до цієї бібліотеки.

Previous Next

Початок роботи з Node-HTML-to-Image

Рекомендований спосіб встановлення Node-HTML-to-Image t — це використання NPM. Будь ласка, використовуйте наступну команду для плавного встановлення.

Встановіть Node-HTML-to-Image через NPM

npm install node-html-to-image

Встановлення Node-HTML-to-Image через Yarn

yarn add node-html-to-image

Генерація зображення з HTML-коду всередині Node.js

Однією з головних переваг бібліотеки Node-HTML-to-Image є її простота, а також можливість легкої інтеграції з будь-якою програмою Node.js. За допомогою лише кількох рядків коду розробники програмного забезпечення можуть почати генерувати зображення з вмісту HTML у своїх власних програмах Node.js. Ця простота використання робить його доступним для розробників будь-якого рівня кваліфікації. У наступному прикладі бібліотека бере простий рядок HTML і перетворює його на зображення PNG. Вихідне зображення, image.png, зберігається в кореневому каталозі.

Як створити зображення PNG із HTML у програмах Node.js?

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './image.png',
  html: '
Hello, World!
'
})
  .then(() => console.log('Image created successfully!'));

Комплексна підтримка HTML і CSS

Відкритий код Node-HTML-to-Image не обмежується базовою обробкою HTML. Він може обробляти складні HTML-документи з великими стилями CSS, а також JavaScript. Незалежно від того, використовуєте ви сучасні функції CSS, як-от Flexbox або Grid, чи вбудовуєте спеціальні шрифти, бібліотека точно відтворить ваш вміст у форматах файлів зображень, таких як JPEG, PNG, WebP тощо. Ось приклад, який демонструє, як розробники можуть створити зображення зі складнішого макета HTML, включаючи стилі для Flexbox і користувацькі кольори, що призводить до добре розробленого зображення.

Як створити зображення зі складнішого HTML-коду в програмах Node.js?

const nodeHtmlToImage = require('node-html-to-image');

const htmlContent = `

  
    

      

        
Welcome to My Website

        
Building the web, one pixel at a time.

      

    

  
`;

nodeHtmlToImage({
  output: './welcome-image.png',
  html: htmlContent
})
  .then(() => console.log('Complex layout image created successfully!'));

Настроювані формати вихідних зображень

Бібліотека Node-HTML-to-Image підтримує кілька вихідних форматів зображень, зокрема PNG, JPEG і WebP. Ця гнучкість дозволяє вибрати найкращий формат для вашого конкретного випадку використання, чи то для веб-продуктивності чи якості зображення. Ось приклад, який показує, як користувачі можуть указати вихід як зображення JPEG, що може бути корисним у сценаріях, коли розмір файлу потрібно мінімізувати без шкоди для якості.

Як указати вихідний формат зображення у JPEG під час перетворення HTML у зображення у Node.js?

nodeHtmlToImage({
  output: './output-image.jpg',
  html: '
JPEG Image Example
',
  type: 'jpeg'
})
  .then(() => console.log('JPEG image created successfully!'));

Розширена підтримка візуалізації зображень у Node.js

Бібліотека Node-HTML-to-Image надала повну підтримку для широкого налаштування процесу відтворення. Розробники програмного забезпечення можуть визначати розмір вікна перегляду, коефіцієнт масштабування пристрою та навіть вставляти власний CSS і JavaScript у HTML перед рендерингом. У наведеному нижче прикладі показано, як зображення візуалізується з настроюваним розміром вікна перегляду 800x600 пікселів, а для якості встановлено значення 100, що забезпечує найвищу можливу якість зображення.

Як рендерити зображення з власним розміром і якістю вікна перегляду в програмах Node.js?

nodeHtmlToImage({
  output: './custom-image.png',
  html: '
Custom Viewport
',
  viewport: { width: 800, height: 600 },
  quality: 100
})
  .then(() => console.log('Image with custom viewport created successfully!'));
 Українська