Se você quiser fazer uma captura de tela de parte ou de toda a sua página da Web usando JavaScript, poderá ficar preso. Criar uma imagem a partir de um elemento HTML pode parecer um desafio, pois não há uma maneira direta de fazer isso em JavaScript.

Felizmente, esta não é uma tarefa impossível e é, de fato, bastante fácil com as ferramentas adequadas. Usando a biblioteca html-to-image, fazer imagens de nós DOM é tão simples quanto uma única chamada de função.

Como o html-to-image funciona?

o html-para-imagem library produz uma imagem na forma de um URL de dados base64. Ele suporta vários formatos de saída, incluindo PNG, JPG e SVG. Para realizar esta conversão, a biblioteca utiliza este algoritmo:

  1. Crie um clone do elemento HTML de destino, seus filhos e quaisquer pseudoelementos anexados.
  2. Copie o estilo para todos os elementos clonados e incorpore o estilo inline.
  3. Incorpore as fontes da Web relevantes, se houver.
  4. Incorpore todas as imagens presentes.
  5. Converta o nó clonado em XML e, em seguida, em SVG.
  6. Use o SVG para criar um URL de dados.

Advertências e Limitações

Mesmo que html-to-image seja uma ótima biblioteca, ela não é perfeita. Tem algumas ressalvas, a saber:

  • A biblioteca não funcionará no Internet Explorer ou Safari.
  • Se o HTML que você tentar converter incluir um elemento canvas corrompido, a biblioteca falhará. Como MDN explica, incluir dados não aprovados pelo CORS em seu elemento de tela o manchará.
  • Como os navegadores limitam o tamanho máximo de um URL de dados, há limites no tamanho do HTML que a biblioteca pode converter.

Usando a Biblioteca

Para experimentar a biblioteca, a primeira coisa que você precisa fazer é criar um diretório de projeto em sua máquina local. Em seguida, instale o html-to-image nesse diretório usando o gerenciador de pacotes npm. Aqui está o comando do terminal para instalá-lo:

npm instalar--save html-to-image

Você também deve instalar um bundler JavaScript, para facilitar um pouco o uso da biblioteca. o desconstruir bundler pode ajudar a empacotar módulos de nós em scripts compatíveis com a web.

npm instalar desconstruir

Isso é tudo que você precisa para instalar. Em seguida, crie um arquivo chamado index.html em seu diretório e sirva-o com um servidor web de sua escolha. Coloque o seguinte código em index.html:

<!doctype html>
<html lang="pt">
<cabeça>
<metacharset="UTF-8">
<metanome="janela de exibição"
 conteúdo="largura=largura do dispositivo, dimensionável pelo usuário=não, escala inicial=1,0, escala máxima=1,0, escala mínima=1,0">
<meta http-equiv="Compatível com X-UA" conteúdo="ou seja = borda">
<título>Documento</title>
<estilo>
 .colorful-div {
 preenchimento: 3rem;
 cor branca;
 imagem de fundo: gradiente linear (à direita, amarelo, rebecapurple);
 borda: preto sólido de 1px;
 margem: 1rem automático;
 tamanho da fonte: 3rem;
 família de fontes: cursiva;
 }
</style>
</head>
<corpo>
<classe div="div-colorido">
 EU'm vai estar em uma captura de tela!
</div>
<classe div="texto longo">
 EU'm um exemplo de um parágrafo suficientemente detalhado que
 ilustra que fazer capturas de tela em JavaScript é
 realmente muito fácil, pelas seguintes razões:
<ul>
<li>Razão 1</li>
<li>Razão 2</li>
<li>Razão 2</li>
</ul>
</div>
<script src="out.js"></script>
</body>
</html>

Este código cria dois elementos na página: um div com fundo gradiente e algum texto e uma lista não ordenada dentro de outro div. Em seguida, você escreverá o JavaScript para converter esses elementos em imagens. Coloque o seguinte código em um novo arquivo chamado script.js:

importar * Como htmlToImage a partir de "html-para-imagem";
const elementos = ['.colorful-div', '.texto longo']


elementos.para cada((elem, ind) => {
const nó = documento.querySelector (elem)
htmlToImage.toPng(nó)
 .então(função (URL de dados) {
deixar imagem = novo Imagem();
 img.src = dataUrl;
documento.corpo.appendChild(imagem);
 })
 .truque(função(erro){
 console.error('ops, algo deu errado!');
console.log (erro)
 });
})

Este código faz algumas coisas:

  • Importa a biblioteca html-to-image.
  • Cria um array feito de seletores CSS visando os dois elementos.
  • Cria uma imagem PNG na forma de um URL de dados de cada elemento da matriz.
  • Cria uma tag img e define seu atributo src para a URL de dados, criando cópias de imagem dos dois elementos.

Agora use esbuild para gerar o arquivo empacotado (out.js) que index.html referencia executando o seguinte em seu terminal:

 ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

Neste ponto, veja como index.html deve ficar no seu navegador:

Embora as cópias pareçam exatamente iguais aos originais, na verdade são elementos de imagem. Você pode confirmar isso por abrindo suas ferramentas de desenvolvimento e inspecionando-os.

Esta biblioteca também funciona com frameworks JavaScript. o documentação html para imagem contém instruções sobre como gerar outros formatos de imagem. Ele também inclui um exemplo mostrando como usar a biblioteca com React.

Fazer capturas de tela com JavaScript é fácil

Não há um método JavaScript nativo para criar imagens a partir de elementos HTML ou fazer capturas de tela do DOM. No entanto, com a ajuda de bibliotecas e serviços como html-to-image, torna-se uma tarefa fácil.

Existem outras maneiras de obter resultados semelhantes, como a biblioteca wkhtmltoimage. Você pode usar esta ferramenta de código aberto para fazer capturas de tela de uma página da Web completa.