Introdução ao Node-HTML-to-Image

A maneira recomendada de instalar o Node-HTML-to-Image é usando o NPM. Use o comando a seguir para uma instalação tranquila.

npm install node-html-to-image

yarn add node-html-to-image

Geração de imagens a partir do código HTML dentro do Node.js

Um dos principais pontos fortes da biblioteca Node-HTML-to-Image é sua simplicidade, bem como pode ser facilmente integrada a qualquer aplicativo Node.js. Com apenas algumas linhas de código, os desenvolvedores de software podem começar a gerar imagens a partir do conteúdo HTML dentro de seus próprios aplicativos Node.js. Essa facilidade de uso o torna acessível a desenvolvedores de todos os níveis de habilidade. No exemplo a seguir, a biblioteca pega uma string HTML simples e a converte em uma imagem PNG. A imagem de saída, image.png, é salva no diretório raiz.

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

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

Suporte a HTML e CSS complexos

O Node-HTML-to-Image de código aberto não se limita ao processamento básico de HTML. Ele pode manipular documentos HTML complexos com estilo CSS extensivo, bem como JavaScript. Quer você esteja usando recursos CSS modernos como Flexbox ou Grid, ou incorporando fontes personalizadas, a biblioteca renderizará com precisão seu conteúdo em formatos de arquivo de imagem como JPEG, PNG, WebP e muitos outros. Aqui está um exemplo que demonstra como os desenvolvedores podem gerar uma imagem a partir de um layout HTML mais complexo, incluindo estilos para Flexbox e cores personalizadas, resultando em uma imagem bem projetada.

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!'));

Formatos de imagem de saída personalizáveis

A biblioteca Node-HTML-to-Image suporta vários formatos de imagem de saída, incluindo PNG, JPEG e WebP. Essa flexibilidade permite que você escolha o melhor formato para seu caso de uso específico, seja para desempenho na web ou qualidade de imagem. Aqui está um exemplo que mostra como os usuários podem especificar a saída como uma imagem JPEG, o que pode ser útil para cenários em que o tamanho do arquivo precisa ser minimizado sem comprometer muito a qualidade.

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

Suporte avançado de renderização de imagem no Node.js

A biblioteca Node-HTML-to-Image forneceu suporte completo para personalizar o processo de renderização extensivamente. Os desenvolvedores de software podem definir o tamanho da janela de visualização, o fator de escala do dispositivo e até mesmo injetar CSS e JavaScript personalizados no HTML antes da renderização. O exemplo a seguir mostra como a imagem é renderizada com um tamanho de janela de visualização personalizado de 800x600 pixels, e a qualidade é definida como 100, garantindo a mais alta qualidade de imagem possível.

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