HTML para PNG: converta HTML e CSS numa imagem para partilhar
Tem um cartão HTML/CSS para partilhar como imagem? Use o HTML to Image para exportar a apresentação renderizada como PNG. É útil para avisos de documentação, pequenas comparações e atualizações cujo espaçamento já controla com CSS.
Este guia converte HTML para PNG a partir de código fornecido. Comece por um excerto estático e autónomo para reproduzir e inspecionar o resultado.
- Abra o conversor de HTML para imagem e cole o código com os estilos necessários.
- Ajuste a largura e verifique o título mais longo e as margens na pré-visualização.
- Escolha PNG e uma escala adequada ao tamanho de apresentação.
- Abra a transferência e reveja limites, texto, fundo e marca antes de publicar.
Guarde o HTML para alterações futuras. A imagem é uma apresentação fixa; as ligações e os botões nela desenhados deixam de ser interativos.
O exemplo utiliza uma família de tipos de letra comum, um bloco curto de estilos e nenhum recurso remoto. É uma demonstração, não um caso de cliente. Todas as versões linguísticas usam a mesma fonte.
```html
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 32px; background: #edf2f8;
font-family: Arial, sans-serif; color: #17263c; }
.card { padding: 32px; background: white;
border: 1px solid #c9d5e4; border-radius: 12px; }
.label { margin: 0 0 12px; color: #47638c; font-size: 14px; }
h1 { margin: 0 0 16px; font-size: 32px; }
p { margin: 0; font-size: 18px; line-height: 1.5; }
</style>
<article class="card">
<p class="label">Documentation update</p>
<h1>Ready for review</h1>
<p>Check the source, review the layout, then share the image.</p>
</article>
```
Copie apenas o HTML dentro do bloco para a ferramenta. Os delimitadores Markdown servem para guardar e partilhar a fonte, não fazem parte da entrada HTML.
Abra o PNG completo. Foi gerado pelo serviço real de exportação HTML do site, com 800 px de largura e saída a 2×. Inclui a marca gratuita. Verificámos título, parágrafo, espaçamento interno e limite do cartão no ficheiro. Isto valida o pequeno exemplo, não qualquer site ou aplicação interativa.
| Sintoma | Primeira verificação |
|---|---|
| Faltam estilos | Incluir o CSS necessário com o excerto |
| O título muda de linha | Comparar largura e tipo de letra disponível |
| Faltam imagens | Confirmar que o serviço consegue aceder aos URL |
| O conteúdo fica cortado | Rever alturas fixas e regras de transbordo |
| O texto inserido fica pequeno | Reduzir conteúdo ou aumentar a imagem apresentada |
Teste primeiro a fonte autónoma e só depois acrescente tipos de letra ou imagens externas. Um recurso acessível numa sessão iniciada pode não estar disponível para o servidor. Evite copiar navegação, scripts e estilos alheios de um site inteiro quando basta um componente pequeno.
Use HTML para controlar o espaçamento e a estrutura com CSS. Se títulos, prosa, tabelas e código forem suficientes, use o editor de imagens Markdown. O guia Markdown para PNG mostra esse percurso mais simples.
Exportar HTML também difere de capturar o URL de um site. Aqui fornece código; não se demonstra iniciar sessão, esperar pelo estado de uma aplicação ou reproduzir todas as interações do navegador.
Consulte as regras atuais de preços e exportação para conhecer as condições gratuitas e sem marca. O exemplo inclui marca e não demonstra uma licença paga.
O resultado é uma imagem raster. Guarde o HTML ou Markdown e disponibilize ligações reais junto da imagem. O texto alternativo deve explicar a mensagem do cartão; evite que informação importante exista apenas dentro da imagem.
Esta exportação utiliza processamento no servidor. Remova conteúdo confidencial se a organização não o permitir. O guia não promete funcionamento sem ligação, ocultação automática de dados nem um prazo específico de conservação.
Comece por um cartão curto, exporte o HTML como PNG e reveja o ficheiro no tamanho previsto. Conserve a fonte junto do conteúdo para voltar a exportar alterações sem reconstruir o cartão a partir de uma captura.