5

Como converter, via código javascript ou php, o html (DOM) da página que está sendo exibida para uma imagem?
Preciso que a página mostrada ao usuário seja convertida em um arquivo de imagem no formato png para o mesmo fazer download e que este seja iniciado automaticamente.

4 Respostas 4

7

Eu usaria a biblioteca: dom-to-image
Você pode ler a documentação sobre o uso dela aqui

Aí vai um exemplo:

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then (function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img); //esse método exibe a imagem na própria pagina
    })
    .catch(function (error) {
        console.error('erro exibido caso falhe', error);
    });

Como faço para abrir a imagem em outra pagina?

Simples, refira uma pagina em branco como o valor de document a ser usado.


Como faço para que a imagem seja transformada e seu download iniciado altomaticamente?

domtoimage.toPng(document.getElementById('my-node'), { quality: 1 })
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.download = 'NomeDaImagem.png';
        link.href = dataUrl;
        link.click();
    });
12
  • document.appendChild(img); faz com que a imagem seja exibida na mesma página? Como faço para abrir em outra? Ou fazer o download dela automaticamente?
    – user75204
    Commented 5/10/2017 às 16:49
  • 1
    @lucaswmolin isso, o método appendChild irá exibir a imagem na própria pagina. Você pode abrir em outra mudando a url referente ao document e abri-la via código JS. Para fazer o download automaticamente eu sugeriria transformar a imagem em um arquivo BLOB e utilizar uma biblioteca como o FileSaver (link - github.com/eligrey/FileSaver.js) existem alguns exemplos na documentação, é bem simples.
    – Paz
    Commented 5/10/2017 às 16:54
  • quer que eu incorpore suas perguntas na minhas resposta? @lucaswmolin
    – Paz
    Commented 5/10/2017 às 16:55
  • Sim, por favor.
    – user75204
    Commented 5/10/2017 às 16:56
  • 1
    @lucaswmolin na documentação existe uma menção de um recurso de compressão para evitar esse tipo de erro, você também pode alcançar isso com meu segundo código ao diminuir a quality de 1 para algo menor :)
    – Paz
    Commented 5/10/2017 às 18:28
4

Creio não ser possível salvar um screenshot com Javascript. Mas uma alternativa interessante é você desenhar o html que quer em um elemento canvas, e depois usar o método toDataURL() para pegar os dados em base 64, e salvar em imagem

document.getElementById('desenhar').onclick = function (){
  var c = document.getElementById("teste");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95,50,40,0,2*Math.PI);
  ctx.stroke();
}

document.getElementById('salvar').onclick = function (){
  console.log(document.getElementById('teste').toDataURL());
}
<canvas id="teste"></canvas><br>
<button id="desenhar">Desenhar</button>
<button id="salvar">Salvar</button>

3
  • sensacional, não tinha pensado nessa alternativa +1
    – Paz
    Commented 5/10/2017 às 16:56
  • @Paz :) mas eu ainda iria pela sua, caso o OP possa usar lib de terceiros Commented 5/10/2017 às 16:56
  • vamos torcer para que possa rs
    – Paz
    Commented 5/10/2017 às 17:05
3

Você pode usar a função imagegrabscreen() e imagegrabwindow(), que permite que você crie "screenshots" do navegador.

Veja os comentários no manual para saber como omitir o Chrome do navegador. Com DCOM habilitado, isso também funcionaria com máquinas remotas do Windows que foram configuradas para permitir o acesso através do DCOM.

Links:

1
  • Bem, caso o autor da pergunta queria utilizar essa solução em php é bom se atentar ao primeiro comentário: For this to work your Apache service must be set to 'Allow service to interact with desktop' otherwise you will just get a blank image.
    – Raizant
    Commented 5/10/2017 às 16:50
2

Tem uma biblioteca JS para isso também: http://html2canvas.hertzen.com/examples.html

Você deve fazer log-in para responder a esta pergunta.