29.01.2025

Convertendo Elementos HTML para o Formato PNG Sem Usar Canvas

Resumo Rápido

A ferramenta html2canvas permite que você crie facilmente e rapidamente uma captura de conteúdo HTML. Esta biblioteca captura um elemento e o transforma em um canvas.

html2canvas(document.querySelector('#capture')).then(canvas => {
    document.body.appendChild(canvas);
});

Este código se concentra no elemento com o identificador id='capture', em seguida, o clona em um canvas, que é posteriormente inserido no corpo do documento. Lembre-se de que html2canvas possui suas limitações, especialmente ao lidar com SVGs e imagens de fundo.

Recursos e Limitações das Ferramentas Disponíveis

Puppeteer — A Escolha dos Profissionais

Se a precisão na renderização é uma prioridade, a melhor opção é o Puppeteer, que opera no modo headless do Chrome. Ele reproduz superbamente todos os detalhes do HTML, incluindo estilos complexos e JavaScript.

chrome --headless --screenshot --window-size=1280x1024 --no-sandbox --default-background-color=0 page.html

A linha de comando permite que você crie uma captura de 'page.html' com resolução personalizável e um fundo transparente.

API para Acelerar o Processo

Se a velocidade de execução é importante, considere serviços de API como ApiFlash ou EvoPDF, que fornecem conversões rápidas de HTML para imagem. No entanto, o uso frequente pode resultar em custos adicionais para esses serviços.

Convertendo SVG para XHTML

SVG combinado com a tag <foreignObject> permite que você incorpore conteúdo XHTML e o renderize em um canvas.

// SVG está pronto para seu grande momento!
var rawData = new XMLSerializer().serializeToString(document.querySelector('svg'));
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.onload = function() {
    // Pose para a foto!
    ctx.drawImage(img, 0, 0);
    canvas.toBlob(function(blob) {
        var imageURL = URL.createObjectURL(blob);
        var newImg = document.createElement('img');
        newImg.onload = function() {
            URL.revokeObjectURL(imageURL);
        };
        newImg.src = imageURL;
        document.body.appendChild(newImg);
    });
};
img.src = 'data:image/svg+xml;base64,' + btoa(rawData);

SVG é uma ferramenta excelente para visualizar XHTML usando JavaScript e canvas.

Características do Processo

Converter HTML em uma imagem requer consideração de certos fatores, como limitações de estilo, tempos de carregamento de conteúdo e restrições de API.

Considerando o Tamanho do Conteúdo

O tamanho do conteúdo capturado deve corresponder ao tamanho do elemento, mesmo que mude dinamicamente:

// Definindo o tamanho!
const dimensions = await page.evaluate(() => {
    const element = document.querySelector('#capture');
    return {
        width: element.offsetWidth,
        height: element.offsetHeight
    };
});
await page.setViewport(dimensions);

Isso garante a criação de uma imagem perfeitamente ajustada.

Considerando Atrasos de Carregamento

É essencial garantir a captura correta de todos os elementos carregados de forma assíncrona. Para fazer isso, utilize atrasos ou aguarde um elemento específico:

// Paciência é fundamental, aguardando o carregamento
await page.waitForSelector('#capture', { visible: true });

Estilos e Fontes

É importante garantir a renderização correta de fontes e estilos para evitar discrepâncias em diferentes ambientes.

Visualização

Converter HTML em uma imagem é semelhante a tirar uma foto de uma mesa bem arrumada:

HTML: 📄 = Preparando para uma celebração 🍽️🥂🌹  
Foto: 📸  
Resultado Final: 🖼️ = Captura para o álbum 📔  

Assim como na fotografia, a ferramenta captura a estética do seu HTML.

Recursos Úteis

1. Guia para Headless Chrome — Conceitos básicos de uso do headless Chrome.
2. Captura de Tela com PhantomJS — Convertendo páginas em imagens usando PhantomJS.
3. Puppeteer — Recursos do Puppeteer que permitem a automação de tarefas no navegador.
4. html2canvas — Instruções sobre como usar html2canvas.
5. Convertendo Caminhos SVG para WebGL | CSS-tricks — Métodos para converter SVG em PNG usando WebGL.
6. Método toBlob() do HTMLCanvasElement | MDN — Convertendo canvas para uma imagem usando toBlob().
7. webshot - npm — Módulo Node.js para transformar páginas da web em imagens.

Video

Navigation