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

Resolvendo problemas comuns com datas no JavaScript
09/04/2023JAVASCRIPT

Resolvendo problemas comuns com datas no JavaScript

Veja como resolver os problemas mais comuns com datas utilizando JavaScript

Saiba mais...
Exportar tabela para Excel com Javascript
07/10/2019JAVASCRIPT

Exportar tabela para Excel com Javascript

Aprenda a exportar sua tabela HTML para Excel usando o plugin DataTables

Saiba mais...

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