APIs e Microsserviços

25 mai, 2012

Screenshot com canvas e javascript

Publicidade

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.

  1. Executar o Preload da página
  2. Executar o Parse dos Elementos
  3. 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