EXTRACT_IMAGES - Extração de Imagens do HTML

O que é este Node?

O EXTRACT_IMAGES é o node responsável por extrair todas as imagens (src) presentes em um documento HTML, incluindo imagens de tags <img> e background-images em CSS inline.

Por que este Node existe?

Imagens podem estar em diferentes formatos no HTML. O EXTRACT_IMAGES existe para:

1. Catalogação: Listar todas as imagens de uma página
2. Download: Preparar lista de imagens para download
3. Validação: Verificar imagens quebradas
4. Análise: Contar e analisar uso de imagens

Como funciona internamente?

Quando extractImages está habilitado, o sistema:

1. Busca tags <img>: Encontra todos os elementos img com src
2. Extrai background images: Procura por background-image em style inline
3. Remove duplicatas: Usa Set para URLs únicas
4. Retorna array: Lista de URLs de imagens

Código interno (html-parser-executor.service.ts:425-447):

private extractImages($: CheerioAPI): string[] {
  const images: string[] = [];

  $('img[src]').each((index, element) => {
    const src = $(element).attr('src');
    const alt = $(element).attr('alt') || '';
    if (src) {
      images.push(src);
    }
  });

  // Also extract background images from CSS
  $('[style*="background-image"]').each((index, element) => {
    const style = $(element).attr('style') || '';
    const match = style.match(/background-image:\s*url\(['"]?([^'"]+)['"]?\)/);
    if (match && match[1]) {
      images.push(match[1]);
    }
  });

  // Remove duplicates and return
  return [...new Set(images)];
}

Quando você DEVE usar este Node?

Use extractImages sempre que precisar de listar todas as imagens de um HTML:

Casos de uso

1. Image scraper: "Baixar todas as imagens de uma galeria"
2. Content analysis: "Contar imagens em artigos"
3. SEO audit: "Verificar alt text de imagens"
4. Backup: "Listar imagens para backup"

Parâmetros

Campo	Tipo	Obrigatório	Descrição
inputVariable	string	Sim	Variável com HTML
parseMode	string	Sim	Qualquer modo
extractImages	boolean	Sim	Deve ser true
metadataVariable	string	Sim	Variável para imagens
outputVariable	string	Não	Variável para conteúdo

Exemplo: Baixar Imagens de Galeria

Objetivo: Extrair URLs de todas as imagens de uma galeria

JSON para Importar

{
  "name": "Extrator de Imagens de Galeria",
  "nodes": [
    {
      "id": "start_1",
      "type": "start",
      "position": { "x": 100, "y": 100 },
      "data": { "label": "Início" }
    },
    {
      "id": "variable_1",
      "type": "variable",
      "position": { "x": 300, "y": 100 },
      "data": {
        "label": "Galeria HTML",
        "parameters": {
          "variableName": "galeria_html",
          "variableValue": "<div class='gallery'><img src='https://example.com/img1.jpg' alt='Foto 1'><img src='https://example.com/img2.jpg' alt='Foto 2'><div style='background-image: url(https://example.com/bg.jpg)'></div></div>"
        }
      }
    },
    {
      "id": "parser_1",
      "type": "html_parser",
      "position": { "x": 500, "y": 100 },
      "data": {
        "label": "Extrair Imagens",
        "parameters": {
          "inputVariable": "galeria_html",
          "parseMode": "text",
          "extractImages": true,
          "outputVariable": "texto",
          "metadataVariable": "meta"
        }
      }
    },
    {
      "id": "loop_1",
      "type": "loop",
      "position": { "x": 700, "y": 100 },
      "data": {
        "label": "Para cada imagem",
        "parameters": {
          "items": "{{meta.images}}",
          "itemVariable": "img_url"
        }
      }
    },
    {
      "id": "message_1",
      "type": "message",
      "position": { "x": 900, "y": 100 },
      "data": {
        "label": "Processar",
        "parameters": {
          "message": "📸 Processando: {{img_url}}"
        }
      }
    },
    {
      "id": "end_1",
      "type": "end",
      "position": { "x": 1100, "y": 100 },
      "data": { "label": "Fim" }
    }
  ],
  "edges": [
    { "source": "start_1", "target": "variable_1" },
    { "source": "variable_1", "target": "parser_1" },
    { "source": "parser_1", "target": "loop_1" },
    { "source": "loop_1", "target": "message_1" },
    { "source": "message_1", "target": "end_1" }
  ]
}

Saída esperada:

Sistema: 📸 Processando: https://example.com/img1.jpg
Sistema: 📸 Processando: https://example.com/img2.jpg
Sistema: 📸 Processando: https://example.com/bg.jpg

Resposta do Node

{
  "success": true,
  "data": {
    "parsed_content": "...",
    "metadata": {
      "images": ["img1.jpg", "img2.jpg", "bg.jpg"]
    }
  }
}

Boas Práticas

✅ SIM: - Use para criar image scrapers - Combine com LOOP para processar cada imagem - Valide URLs antes de baixar - Use para auditoria de conteúdo

❌ NÃO: - Não baixe muitas imagens sem controle - Não confie que todas as URLs são válidas - Não esqueça de tratar URLs relativas

Dicas

💡 Dica 1: Extrai tanto <img src> quanto background-image do CSS inline

💡 Dica 2: URLs são retornadas como encontradas (relativas ou absolutas)

💡 Dica 3: Duplicatas são removidas automaticamente

Próximo Node

→ EXTRACT_LINKS - Extrai links do HTML → PARSE_CUSTOM - Extrai elementos específicos