post #3096
Gerar Imagem a partir do HTML da pagina ou seção com JS
Publicado em: 25/08/2023 / Atualizado em: 25/08/2023
Abaixo estou compartilhando um código realmente surpreendente, que pode te ajudar a gerar imagens a partir de uma pagina ou seção em HTML.
Segue código abaixo:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<div id="conteudo">
<!-- Seu conteúdo aqui -->
</div>
<button id="botao">Gerar Imagem</button>
<script>
document.getElementById("botao").addEventListener("click", function() {
const conteudo = document.getElementById("conteudo");
html2canvas(conteudo).then(function(canvas) {
const imgData = canvas.toDataURL("image/png");
const link = document.createElement("a");
link.href = imgData;
link.download = "captura.png";
link.click();
});
});
</script>
Com o código acima, é possível gerar uma imagem em PNG para download de todo conteúdo que esta dentro da div com ID “conteúdo”.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=3096
ID de Referência: 3096
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.