n8n-nodes-atoscapital-htmltoimage

Este é um node customizado para n8n que converte strings HTML em imagens usando Satori (SVG-based rendering). Não requer Chrome ou navegador!

✨ Principais Características

• ✅ Funciona imediatamente: Sem instalação de Chrome ou dependências extras
• ✅ 3 operações disponíveis: Convert to PNG, Convert to JPEG, Convert to WebP
• ✅ Leve e rápido: Baseado em SVG rendering (Satori + resvg-js)
• ✅ Flexbox suportado: Layout moderno com flexbox
• ✅ Configurável: Dimensões customizáveis, qualidade de imagem, background
• ✅ Zero configuração: Instale e use imediatamente

📦 Instalação

Via n8n GUI (Recomendado)

1. Vá em Settings > Community Nodes
2. Clique em Install
3. Digite: n8n-nodes-atoscapital-htmltoimage
4. Clique em Install
5. Pronto! O node funcionará imediatamente, sem configuração adicional

Via npm (Manual)

cd ~/.n8n/nodes
npm install n8n-nodes-atoscapital-htmltoimage

Reinicie o n8n e pronto para usar!

🚀 Uso no n8n

1. Adicione o node HTML to Image ao seu workflow
2. Configure os parâmetros:

Parâmetros Principais

• Resource: Image (fixo)

• Operation:

  • Convert to PNG - Lossless, com transparência
  • Convert to JPEG - Comprimido, sem transparência
  • Convert to WebP - Moderno, eficiente

• HTML Content: Cole seu código HTML com inline styles

• Width: Largura da imagem (default: 1200px)

• Height: Altura da imagem (default: 630px)

• Quality: 0-100 (apenas JPEG e WebP)

• Binary Property Name: Nome da propriedade para armazenar a imagem (default: data)

• Background Color: Cor de fundo (transparent, white, #RRGGBB, rgba(...))

⚠️ Importante: Use Inline Styles

Este node usa Satori, que requer inline styles. CSS externo (<link> ou <style>) não é suportado.

✅ Correto:

<div style="display: flex; width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; justify-content: center; align-items: center; font-family: Arial, sans-serif;">
  <div style="background: white; padding: 40px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); color: #333;">
    <h1 style="margin: 0; font-size: 48px;">Hello from n8n!</h1>
    <p style="margin-top: 20px; font-size: 24px;">HTML convertido para imagem sem Chrome!</p>
  </div>
</div>

❌ Incorreto (não funcionará):

<link rel="stylesheet" href="styles.css">
<div class="card">Content</div>

Exemplo Completo: Social Card / OG Image

<div style="display: flex; flex-direction: column; width: 100%; height: 100%; background: #0f172a; color: white; justify-content: center; align-items: center; padding: 60px;">
  <h1 style="font-size: 64px; font-weight: bold; margin: 0; text-align: center; background: linear-gradient(to right, #06b6d4, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
    Meu Projeto Incrível
  </h1>
  <p style="font-size: 32px; margin-top: 30px; color: #94a3b8; text-align: center; max-width: 800px;">
    Descrição do projeto em uma linha
  </p>
  <div style="display: flex; gap: 20px; margin-top: 50px;">
    <div style="background: #1e293b; padding: 20px 40px; border-radius: 8px; font-size: 20px;">
      🚀 Fast
    </div>
    <div style="background: #1e293b; padding: 20px 40px; border-radius: 8px; font-size: 20px;">
      ⚡ Easy
    </div>
    <div style="background: #1e293b; padding: 20px 40px; border-radius: 8px; font-size: 20px;">
      💎 Beautiful
    </div>
  </div>
</div>

Configure:

• Width: 1200
• Height: 630
• Operation: Convert to PNG
• Background Color: transparent

🎯 Use Cases Perfeitos

• Open Graph images (social cards para Twitter, Facebook, LinkedIn)
• Badges e certificados dinâmicos
• Thumbnails de conteúdo
• Email images (não precisa de JavaScript)
• Relatórios em PDF com imagens geradas
• Cards de produtos, usuários, posts

🔧 CSS Suportado

✅ Funciona:

• Flexbox (display: flex, justify-content, align-items, etc.)
• Inline styles
• Cores (hex, rgb, rgba, named colors)
• Gradientes (linear-gradient, radial-gradient)
• Border radius, shadows
• Font properties (size, weight, family)
• Padding, margin
• Text alignment

❌ Não suportado:

• CSS Grid (use flexbox)
• External stylesheets
• CSS animations/transitions
• Pseudo-elements (:before, :after)
• Custom fonts (apenas system fonts: Arial, Times New Roman, Courier)
• JavaScript

📊 Comparação com Puppeteer

| Característica | Satori (este node) | Puppeteer | |----------------|-------------------|-----------| | Instalação Chrome | ❌ Não precisa | ✅ Requer (~170-280MB) | | Configuração | ✅ Zero config | ❌ Manual setup | | Velocidade | ✅ Rápido (~50-100ms) | ⚠️ Lento (~500-2000ms) | | Tamanho pacote | ✅ ~8MB | ❌ ~180-300MB | | CSS complexo | ⚠️ Inline only | ✅ Full CSS3 | | JavaScript | ❌ Não suporta | ✅ Full JS | | Uso de memória | ✅ Baixo (~50MB) | ❌ Alto (~200-500MB) | | Ideal para | OG images, badges, cards | Páginas complexas |

🔧 Solução de Problemas

Minha imagem não renderiza corretamente

Causa: Provavelmente usando CSS externo ou classes CSS.

Solução: Converta todos os estilos para inline:

<!-- ❌ Não funciona -->
<style>.card { background: red; }</style>
<div class="card">Text</div>

<!-- ✅ Funciona -->
<div style="background: red;">Text</div>

Preciso renderizar HTML complexo com CSS externo

Solução: Para HTML super complexo, considere usar um node baseado em Puppeteer (como n8n-nodes-puppeteer). Este node é otimizado para HTML simples com inline styles.

Texto não aparece ou está em branco

Causa: Falta de font ou tamanho de fonte não definido.

Solução: Sempre defina font-family e font-size:

<div style="font-family: Arial, sans-serif; font-size: 16px;">Text</div>

📚 Desenvolvimento

Setup Local

git clone https://github.com/atoscapital/n8n-nodes-atoscapital-htmltoimage
cd n8n-nodes-atoscapital-htmltoimage
npm install
npm run build

# Link para n8n local
npm link
cd ~/.n8n/custom
npm link n8n-nodes-atoscapital-htmltoimage

Scripts Disponíveis

npm run build   # Compila TypeScript e copia assets
npm run dev     # Build com watch mode
npm run lint    # Verifica código
npm run format  # Formata código

🏗️ Arquitetura

Este node usa a stack da Vercel para geração de imagens:

1. satori-html: Converte HTML string → React VDOM
2. satori: Renderiza VDOM → SVG (usando Yoga Layout para flexbox)
3. @resvg/resvg-js: Converte SVG → PNG (Rust-based, alta performance)
4. sharp: Converte PNG → JPEG/WebP (quando necessário)

Tudo acontece em Node.js puro, sem navegador!

🙏 Suporte

Para problemas ou dúvidas:

• GitHub Issues: https://github.com/atoscapital/n8n-nodes-atoscapital-htmltoimage/issues
• Email: [email protected]

📄 Licença

MIT © Flávio Bento - Atos Capital

Nota: Este node é perfeito para HTML simples com inline styles (OG images, badges, cards). Para páginas web complexas com CSS externo, considere usar um node baseado em Puppeteer.