Como transformar HTML em imagem facilmente via NodeJS ou via Browser
Se você alguma vez já pensou em transformar um trecho de HTML em uma imagem, saiba que isso é sim possível. Não só é possível, como pode ser feito tanto no servidor quanto no próprio browser.
NodeJS
Para gerar uma imagem a partir de um trecho HTML no servidor, você precisará adicionar ao seu projeto uma biblioteca chamada Puppeteer.
O Puppeteer é uma biblioteca Node.js que permite o controle do Chrome ou Chromium de forma automatizada e sem que seja necessário abrir a janela do navegador (headless). Você pode usá-lo para automatizar tarefas na web como fazer screenshots, gerar PDFs, e interagir com sites dinâmicos baseados em JavaScript, dos quais seria impossível obter o conteúdo através de um simples requisição HTTP.
npm install puppeteer
Uma vez instalada a biblioteca, você precisará:
- Inicializar um browser.
- Criar uma nova página.
- Definir o conteúdo HTML para a página criada.
- Transformar o HTML da página em imagem (screenshot).
- Encerrar o browser.
const puppeteer = require('puppeteer');
async function init(){
const browser = await puppeteer.launch();
const page = await browser.newPage();
const htmlContent = `
<html>
<body>
<h1>Hello world!</h1>
</body>
</html>
`;
await page.setContent(htmlContent);
await page.screenshot({
path: 'imagem.png',
fullPage: true
});
await browser.close();
}
init();
Caso você queira gerar uma imagem contendo apenas um pedaço da página, ou queira gerar uma imagem num formato que não seja PNG, o método page.screenshot possui alguma opções que permitem personalizar o resultado:
await page.screenshot({
path: String, // Local onde a imagem será salva
type: 'png' || 'jpeg' || 'webp', // Formato da imagem (padrão: 'png')
quality: Number, // Qualidade JPEG/WebP (0-100)
fullPage: Boolean, // Captura toda a página (padrão: false)
clip: { // Captura uma região da página
x: Number, // Coordenada X
y: Number, // Coordenada Y
width: Number, // Largura da região capturada
height: Number, // Altura da região capturada
},
omitBackground: Boolean, // Remove o fundo (padrão: false)
encoding: 'binary' || 'base64', // Formato dos dados (padrão: 'binary')
captureBeyondViewport: Boolean, // Captura além da dobra da página (padrão: true)
optimizeForSpeed: Boolean, // Acelera a conversão (padrão: false)
});
OBS: A versão do Puppeteer usada neste post é a 24.2.1.
Browser
Se no servidor foi necessário instalar a biblioteca Puppeteer, no Browser precisaremos da ajuda da biblioteca html2canvas.
Você pode instalar a biblioteca via NPM:
npm install html2canvas
Ou pode baixar a biblioteca de uma CDN diretamente no HTML da sua página web:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
Baseada num processo bem mais simples que o utilizado no browser, a biblioteca html2canvas apenas transforma um trecho de código HTML em um canvas de maneira assíncrona. Assim que a transformação é concluída, basta converter o canvas para imagem e disparar o processo de download da imagem.
function htmlToImage(elementId) {
html2canvas(document.getElementById(elementId))
.then(canvas => {
const img = canvas.toDataURL('image/png');
let link = document.createElement('a');
link.href = img;
link.download = 'imagem.png';
link.click();
});
}
Convertendo HTML para imagem no browser
Mão na massa: Neste Gist você encontra, em um único arquivo HTML, todo o código necessário para rodar localmente o exemplo apresentado no vídeo acima. Já neste repositório, você encontra o código necessário para converter HTML em imagem usando o NodeJS.
Saiba mais: Se você curtiu este post, talvez se interesse em saber como definir múltiplas bordas para um elemento HTML usando apenas CSS.