Screenshot em HTML5

Front-end
#1

Galera, vocês conhecem alguma API do HTML5 ou Javascript, que faz a função de tirar screenshot da página web que o usuário está e salva essa screenshot em um arquivo .png ou .jpeg?

1 curtida
#2

Tem sim, se você utilizar html2canvas, você consegue gerar um screenshot de alguma pagina Web.

DEMO

Como seria:

Faça o download mais recente do html2canvas ou pelo link direto, e configure em uma página Web dessa forma:

<!DOCTYPE html>
<html>
<head>
	<title>html2canvas</title>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/html2canvas.js"></script>	
</head>
<body>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		Fusce in ipsum malesuada, congue neque nec, imperdiet justo.
		Maecenas in justo eget orci pulvinar pretium et in odio.
		Phasellus quis enim aliquam, placerat felis sed, rhoncus ante.
		In viverra nisi vitae fermentum fermentum.
		Suspendisse sit amet leo bibendum, rutrum lacus sed, eleifend diam.
		Suspendisse eu sapien vitae nisl facilisis semper.
		Integer non erat et quam vulputate semper.
		Sed eget leo auctor, eleifend nibh sit amet, tincidunt odio.
		In facilisis lacus in felis porta pellentesque.
		Curabitur maximus sem a facilisis euismod.
		Quisque rutrum tortor eu pharetra auctor.
		Duis egestas ipsum non eleifend ultricies.
		Phasellus in nisi sit amet sapien luctus ultricies.
		Sed ornare ante sed odio pharetra, eget convallis nisl sollicitudin.
		In nec turpis non mi pharetra rhoncus et sit amet lorem.
		Nunc dictum elit ut eros rutrum, non bibendum nisl feugiat.
		Vestibulum eu purus nec odio convallis commodo.
		Maecenas venenatis justo vel arcu venenatis, nec dapibus nisl tempor.
		Sed ut orci in orci fermentum viverra ac eget orci.
	</p>    	
	<p>
		<img src="" id="img1" border="0" />
	</p>
	<button type="button" id="btnScreenshot">Screenshot</button>
	<script>
		$(document).ready(function()
		{
			$("#btnScreenshot").on('click', function(e)
			{
				html2canvas(document.body, {
					taintTest: true,
	  				onrendered: function(canvas) {
	  					$("#img1").attr('src', canvas.toDataURL());
	    				//document.body.appendChild(canvas);
	  				}			
	  			});
			});	
		});	
	</script>
</body>
</html>

Nesse caso especifico na hora que você clica no botão Screenshot, ele executa o javascript e manda carregar a imagem para um tag img do seu id “img1”. Clicando com o botão direito salva como imagem.

Dá para automatizar, sim:

Exemplo: Tirar print Screen e salvar imagem automaticamente em C#. Nesse caso foi com .NET, mas, qualquer linguagem pega essa valor e transforma em uma imagem, vai depender da linguagem.

Em html puro a solução acima é bem viável.

Observação: Se sua página contiver imagens, a captura das imagens só serão feitas corretamente se a página estiver rodando em um servidor com as imagens dentro dele, pelos testes que eu fiz.

DEMO

1 curtida
#3

Valeu pela ajuda cara!! Vou dar uma olhada nisso aí que tu me passou, e vou ver se funciona, qualquer coisa escrevo aqui novamente nesse tópico!! Vou fazer diversos testes!

1 curtida
#4

Olá! Vou aproveitar o assunto iniciado pelo Gabriel… tenho um DIV com 2,3 ou 4 colunas e em cada coluna, preciso colocar um printscreen a partir de url apontada… abaixo um titulo seguido de um texto. A cada acesso nessa página, será mostrado sempre a tela estática atualizada desses websites. Meu conhecimento é insuficiente para formular a solução.