Como salvar um trecho de uma página web como imagem
Transforme qualquer DIV em PNG com o uso da biblioteca html2canvas
15/03/2024
Como salvar um trecho de uma página web como imagem
Introdução
Neste tutorial, mostraremos como salvar um elemento div como uma imagem PNG, uma técnica útil para exportar conteúdo dinâmico ou visualizações personalizadas de páginas web.
Essa funcionalidade é ideal para criar imagens de gráficos, certificados, ou qualquer conteúdo visual diretamente do navegador.
Código Pronto para Uso
Agora, vamos apresentar o código completo que permite salvar um elemento div como um arquivo PNG. Este script utiliza a biblioteca html2canvas para capturar o conteúdo de um div e salvá-lo como imagem, facilitando a sua implementação em qualquer projeto web.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Salvar DIV como PNG</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>
<style>
#save-as-png {
height: 300px;
width: 500px;
background-color: #1162C5;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%);
font-family: sans-serif;
font-size: 36px;
font-weight: bold;
line-height: 300px;
text-align: center;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
color: white;
}
</style>
</head>
<body>
<div id="save-as-png">Conteúdo do DIV</div>
<br><br>
<button onclick="saveAsPNG()">Salvar como PNG</button>
<script>
// Função para salvar um DIV como PNG
function saveAsPNG() {
const element = document.getElementById('save-as-png');
html2canvas(element).then(function(canvas) {
const link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = 'nome-do-arquivo.png';
link.click();
});
}
</script>
</body>
</html>
Veja uma demonstração
Para testar o funcionamento, clique em "Salvar como PNG".
Explicando o Código
Detalharemos cada parte do código para compreender melhor como a funcionalidade é implementada.
Inclusão da Biblioteca html2canvas
Para capturar o conteúdo do div e convertê-lo em uma imagem, incluímos a biblioteca html2canvas usando a tag script. Esta biblioteca é essencial para o processo de conversão.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>Elemento HTML e Botão de Ação
Criamos um div com um ID específico e um botão. O div contém o conteúdo que desejamos converter em imagem. O botão, ao ser clicado, aciona a função JavaScript responsável pela conversão.
<div id="save-as-png">Conteúdo do DIV</div>
<br><br>
<button onclick="saveAsPNG()">Salvar como PNG</button>O estilo do elemento DIV save-as-png é definido da seguinte forma:
#save-as-png {
height: 300px;
width: 500px;
background-color: #1162C5;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%);
font-family: sans-serif;
font-size: 36px;
font-weight: bold;
line-height: 300px;
text-align: center;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
color: white;
}Função saveAsPNG
A função saveAsPNG captura o elemento div usando a biblioteca html2canvas e, em seguida, cria um link temporário para fazer o download da imagem capturada como PNG.
function saveAsPNG() {
const element = document.getElementById('save-as-png');
html2canvas(element).then(function(canvas) {
const link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = 'nome-do-arquivo.png';
link.click();
});
}Conclusão
Este tutorial mostrou como converter um div em PNG, uma técnica versátil para desenvolvedores web. Esse método é ideal para criar funcionalidades como exportação de gráficos, geração de certificados digitais personalizados ou capturas de tela de partes específicas de uma página web.
Encorajamos a experimentação e adaptação deste código para enriquecer seus projetos, seja em dashboards interativos, aplicações educacionais, ou plataformas de e-commerce. A habilidade de salvar conteúdo web como imagens abre portas para soluções criativas em desenvolvimento web.