Exportar HTML para imagem com Javascript

Aprenda como exportar o seu HTML como imagem usando Javascript

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

 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.

 

Quer conferir mais dicas sobre JavaScript? Clique aqui e veja mais dicas!