Exportar HTML para imagem com Javascript

Exportar HTML para imagem com Javascript

Se você deseja exportar sua página HTML como imagem, existe uma forma simples e rápida de fazer isso com JavaScript. 

 Utilizando a bibliobteca HTML2canvas você pode fazer isso com pequenas modificaçãoes em seu código.

Para fazer o download, acesse este link:

html2canvas

 Aqui tem um exemplo de HTML.

 

 

 A estrutura do HTML é bem simples, no começo da página fazemos a importação da biblioteca html2canvas. Dentro do corpo da página definimos uma DIV com o nome onde o htmltoimage nosso conteúdo HTML será inserido. Acima desta div, tem um botão que chama a função downloadimage, que fai fazer a exportação.

 Abaixo desta div e antes de fechar o BODY, insira o seguinte código em javascript dentro de uma tag SCRIPT para definir o conteudo da função "downloadimage:

 

function downloadimage(){

var container = document.getElementById("htmltoimage");

html2canvas(container,{allowTaint : true}).then(function(canvas) {

var link = document.createElement("a");

document.body.appendChild(link);

link.download = "html_image.jpg";

link.href = canvas.toDataURL();

link.target = "_blank";

link.click();

});

}

Esta função recupera o conteúdo da div "htmltoimage" e faz a exportação no formato JPG com o nome de "html_image.jpg". A exportação utiliza a função "html2canvas", enviando dois parâmetros, o primeiro é o conteúdo HTML, que é a nossa div "htmltoimage", o segundo é um objeto com configurações. Para ver todas as opções de configuração, você pode dar uma olhada neste link:

Configurações HTML2Canvas

Existem algumas restrições. As imagens utilizadas no seu HTML não pode ser de outros sites, o conteúdo precisa ser do mesmo domínio. A imagem é gerada do lado do usuário, ou seja, navegadores mais velhos podem ter problemas.

Você pode conferir um exemplo clicando no link a seguir. No código fonte da página tem toda a programação necessária.

Exportar HTML como imagem.

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Upload de arquivos com validação em javascript
17/11/2019JAVASCRIPT

Upload de arquivos com validação em javascript

Aprenda a validar a extensão e o tamanho do arquivo antes de fazer upload com JS

Saiba mais...
Separando um array de strings em conjuntos de arrays ordenados alfabeticamente com JavaScript
19/03/2023JAVASCRIPT

Separando um array de strings em conjuntos de arrays ordenados alfabeticamente com JavaScript

Veja várias formas de separar um array de string com JavaScript

Saiba mais...
Avisar quantos caracteres faltam com JavaScript
22/10/2019JAVASCRIPT

Avisar quantos caracteres faltam com JavaScript

Avise quantos caracteres faltam ao digitar dados em seu formulário

Saiba mais...

Conteúdo sobre banco de dados sem complicação!


Warning: Cannot modify header information - headers already sent by (output started at /home/storage/f/7d/a9/dbins/public_html/blog/post.php:101) in /home/storage/f/7d/a9/dbins/public_html/blog/ga4_track.php on line 11