I put a map on my website and I want to make a button that generates a png image when clicked on it, I used html2Canvas but when I click it it can not save the image of the map.
Code used:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html2 Canvas</title>
<!-- Html2Canvas -->
<script type="text/javascript" src="canvas.js"></script>
<script type="text/javascript" src="canvasmin.js"></script>
<!-- Leaflet -->
<link rel="stylesheet" type="text/css" href="http://www.tecnologicbrasil.com.br/leaflet/leaflet.css">
<script src="http://www.tecnologicbrasil.com.br/leaflet/leaflet.js"></script></head><body><buttononclick="prints();">Click para dar print</button>
<div id="mapa" style="position: absolute; top: 25%; left: 25%; margin: 0; width: 50%; height: 50%;">
</div>
<div id="colamapa"style=" margin: 0; width: 50%; height: 50%; background-color: red">as</div>
<script id="teste" type="text/javascript">
var map = L.map('mapa').setView([-3.130409,-60.023426], 12);
L.tileLayer('http://a.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {attribution: 'Mapas © OpenCycleMap, Dados do Mapa © contribuidores do OpenStreetMap'}).addTo(map);
</script>
<script type="text/javascript">
function prints(){
html2canvas(document.querySelector("#mapa")).then(canvas => {
document.body.appendChild(canvas)
});
}
</script>
</body>
</html>
The site where I shot js from the html2canvas is this: