1. Товары
  2.   Изображение
  3.   Node.js
  4.   Node-HTML-to-Image
 
  

Бесплатный API Node.js Imaging для преобразования 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 — использование 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!'));
 Русский