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
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();
});
-
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?– user75204Commented 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.– PazCommented 5/10/2017 às 16:54
-
quer que eu incorpore suas perguntas na minhas resposta? @lucaswmolin– PazCommented 5/10/2017 às 16:55
-
Sim, por favor.– user75204Commented 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 :)– PazCommented 5/10/2017 às 18:28
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>
-
-
@Paz :) mas eu ainda iria pela sua, caso o OP possa usar lib de terceiros Commented 5/10/2017 às 16:56
-
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:
-
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.
– RaizantCommented 5/10/2017 às 16:50
Tem uma biblioteca JS
para isso também:
http://html2canvas.hertzen.com/examples.html