Como já citado, html2canvas
é uma ótima biblioteca para o uso, antes de começarmos tenha em mente:
html2canvas
não trabalha elementos DOM reais ele apenas simula eles com Canvas
- Ele é considerado alpha ou experimental, portanto ainda tem muito a evoluir (se bem que na maioria dos testes ele se saiu muito bem)
- Para acessar imagens de diferentes domínios será necessário o uso de proxy (feito por linguagens como php, python, java, etc).
- Acredito que o uso de
<iframe>
ainda não seja suportado, portanto o melhor neste caso é usar a API do google-maps ao invés de iframes.
Usando a API do Google Maps
Um exemplo do uso do Google Maps seria:
var parametreCarteVillage = {
zoom : 9,
center : new google.maps.LatLng(38.959409, -87.289124),
disableDoubleClickZoom : false,
draggable : true,
scrollwheel : true,
panControl : false,
disableDefaultUI : true,
mapTypeControl : true,
keyboardShortcuts : true,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), parametreCarteVillage);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(38.959409,-87.289124),
map: map,
title: 'Titulo!'
});
#map_canvas{
height: 400px;
width: 600px;
border: 1px #c0c0c0 solid;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="map_canvas"></div>
Para adicionar mais opções ao mapa leia a documentação
Usando o html2canvas
Recomendo baixar a versão 0.5.0-alpha em https://github.com/niklasvh/html2canvas/releases
e incluir na página que vai usar o Google Maps, deve ficar algo como:
<script src="html2canvas.js"></script>
html2canvas(document.getElementById("map_canvas"), {
"logging": true //Habilita os logs
}).then(function(canvas) {
var img = new Image();
img.onload = function () {
img.onload = null;
document.getElementById("output").appendChild(img);
};
img.src = canvas.toDataURL("image/png");
});
Porém como mencionei anteriormente, para acessar imagens de diferentes domínios, no caso o seu domínio acessa as imagens do google, será necessário usar CORS
, porém as imagens estão no domínio do Google e isto não temos controle, então teremos que usar proxy.
Proxy neste caso não é a tecnologia para usar um ip diferente na sua máquina, mas sim um script que roda no servidor e exibe a imagem do domínio externo como se estive-se no seu domínio, ou mesmo que sejam três domínios seu-site.com
, maps.google.com
e proxy.seu-site.com
ele faz o uso de CORS
ou do data URI scheme
.
Proxy para html2canvas
Eu desenvolvi quatro proxys em linguagens diferentes:
O uso seria algo como (exemplo com aspx
):
html2canvas(document.getElementById("map_canvas"), {
"logging": true, //Habilita os logs
"proxy":"html2canvasproxy.ashx"
}).then(function(canvas) {
var img = new Image();
img.onload = function () {
img.onload = null;
document.getElementById("output").appendChild(img);
};
img.src = canvas.toDataURL("image/png");
});
Lista de opções estras para usar em html2canvas(..., {opções}).then(...)
Opção |
Tipo |
padrão |
Descrição |
allowTaint |
boolean |
false |
Permite causar o taint quando houver imagens cross-origin |
background |
string |
#fff |
Troca a cor de fundo do canvas, se não espeficicado no dom use undefined para transparente |
height |
number |
null |
Limita a altura do em pixels. Se null irá renderezar com a altura total da janela |
letterRendering |
boolean |
false |
Usado para renderizar cada letra separadamente. É necessário se estiver usando letter-spacing |
logging |
boolean |
false |
Quando true mostra log no console do navegador |
proxy |
string |
undefined |
A url do proxy é usa da para carregar imagens cross-origin. Se não definido ou vazio as imagens não serão carregadas |
taintTest |
boolean |
true |
Testa cada imagem para antes de desenhar, para verificar se irá manchar o <canvas> |
timeout |
number |
0 |
Tempo de espera para o carregamento das imagens em milesegundos. Se 0 não haverá esperar |
width |
number |
null |
Limita a largura do em pixels. Se null irá renderezar com a largura total da janela |
useCORS |
boolean |
false |
Se true tenta carregar as imagens com cross-origem, se não tenta usar o proxy |
Relatado: Como usar o addHTML do jsPDF?
iframe
, no entanto.