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.

  4 Passos: Desbloquear o menu avançado da BIOS InsydeH2o do Acer Aspire

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.

  Instalando/Utilizando o Protheus TOTVS em estações Linux 64 bits

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/

  Os sites gratuitos e essenciais para todo Designer, Social Mídia ou Blogueiros

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.