Salve, salve, pessoal!
Até pouco tempo atrás era impossível realizar print-screens das telas de um browser utilizando javascript. Ou você fazia um executável, ou utilizava algum componente activeX ou similar.
Com o advento do html5, novas tags foram implementadas, um deles é o canvas, que possibilita realizar essa tarefa.
Com o elemento canvas você pode criar gráficos, composições de fotos, animações, imagens 2D, 3D e existem várias APIs que te fornecem inúmeros recursos, como a html2canvas, e é esta API que vamos trabalhar.
Primeiramente vamos entrar no site e baixar o arquivo. Imagino que você já tenha baixado o arquivo jquery.js
<script src="Scripts/html2canvas.js" type="text/javascript"></script>
O html2canvas tem um método inicial chamado Preload, que recebe dois parâmetros.
- Element: É o elemento que você deseja estar renderizando, por default é document.body
- Options: São as opções de renderização.
- Complete: função callback que será chamada depois do Preloading
- Logging: Loga os eventos no console
- Proxy: Url da página que vai ser usada como proxy
- Timeout: Tempo para carregamento das imagens
O script executa o seguinte comportamento.
- Executar o Preload da página
- Executar o Parse dos Elementos
- Executar o Render do Objeto
Vamos ao código:
<script>
$(window).ready(function () {
html2canvas.Preload(document.body, {
complete: function (images) {
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue, { elements: { length: 1} });
var img = canvas.toDataURL();
openConsole("<img src='" + img + "'><p>");
}
});
function openConsole(content) {
top.console = window.open('', 'myconsole',
'width=350,height=250'
+ ',menubar=0'
+ ',toolbar=1'
+ ',status=0'
+ ',scrollbars=1'
+ ',resizable=1')
top.console.document.writeln(
'<html><head><title>Console</title></head>'
+ '<body bgcolor=white onLoad="self.focus()">'
+ content
+ '</body></html>'
)
top.console.document.close()
};
});
</script>
Um exemplo mais avançado: Vamos recuperar um print de um site
var proxyUrl = "http://html2canvas.appspot.com";
$(window).ready(function () {
var a, b;
$.ajax({ data: { xhr2: false, url: "http://www.globo.com" }, url: proxyUrl, dataType: "jsonp", success: function (e) {
a = document.createElement("iframe");
document.body.appendChild(a);
$(a).width("700").height("500");
b = a.contentWindow.document;
b.open();
b.write(e);
b.close()
$(a.contentWindow).load(function () {
var g = $(a).contents().find("body")[0];
var preload = html2canvas.Preload(g, {
"complete": function (images) {
var queue = html2canvas.Parse(g, images);
var canvas = $(html2canvas.Renderer(queue, { elements: { length: 10} }));
var img = canvas[0].toDataURL();
openConsole("<img src='" + img + "'><p>");
}
});
});
}
})
});
Veja: http://testes.felipehuggler.com/screenshot/
Lembrando que os browsers que aceitam canvas são Chrome, FF, Opera e IE7+
O site Can I Use tem a lista dos elementos que são compatíveis com cada browser.
Espero que seja útil!
Até o próximo