Gerando imagens a partir de uma página/arquivo em HTML

html2canvas? Já ouviu falar?

Umas das maneiras para obter/gerar uma imagem a partir de uma página HTML é utilizar a biblioteca em javascript html2canvas desenvolvido por Niklas von Hertzen.
Dependendo do cenário, a vantagem de sua utilização está em não depender de uma linguagem server-side, como o PHP para gerar as imagens.


A versão que estou utilizando é a v0.4.1 que foi lançada em 07/09/2013 e até o momento é a mais estável. É importante dizer que esse script ainda esta no estado de experimento, dessa forma não é recomendado seu uso em ambientes de produção, isso porque cada propriedade do CSS precisa ser construida manualmente, dessa forma ainda existem muitas que não são suportadas.

Compatibilidade

De acordo com seus desenvolvedores, essa lib funciona nos seguintes navegadores:
* Firefox 3.5+
* Google Chrome
* Opera 12+
* IE9+
* Safari 6+

Eu particularmente recomendo o Firefox, pois facilita para salvar a imagem gerada, bastando apenas clicar com o direito sobre a imagem e escolher a opção “Salvar Figura”, já no Google Chrome não encontrei essa opção.

Onde obter uma cópia

Você pode obter uma cópia da biblioteca em: https://github.com/niklasvh/html2canvas/

Uso

Para gerar uma imagem a partir do html, basta passar qual elemento deseja gerar a imagem:

html2canvas(element, options);

exemplo:

<html>
<head>
<title>Gerando imagem a partir do HTML</title>
<script type="text/javascript" src="html2canvas.min.js"></script>
</head>
<body><h1>Gerando imagem a partir do HTML</h1>

lib desenvolvida por Niklas von Hertzen

<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
</script>
</body>
</html>

Página sobre o projeto: http://html2canvas.hertzen.com/

Algumas observações manterei essa parte atualizada

  • Ao utilizar imagens de fundo (background-image) o tamanho deve ser informado para a largura e para altura.
  Como se proteger da nova onda de ataques de Ransomware “PETYA”