0
Guys I put a map on my site and I want to make a button that generates a png image when clicked on it, I used html2Canvas but when I click 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>
<button onclick="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>
html2canvas js shooting site is this:
There are some plugins for Leaflet.js to do what you want.
– fernandosavio
I tried to use their plugin but it’s not picking up, just picked up with that map that’s on their site, I tried to add the function to my maps but it didn’t work. and I want this function to be able to capture not only from one map but from several. but thank you very much for the suggestion from the leaflet library.
– Tecnologic Brasil
you can include no in the html meta tags direct link from js https://html2canvas.hertzen.com/dist/html2canvas.min.js
– Jadson Matos
there are plugins for iso, like this: https://github.com/mapbox/leaflet-image but it may not work, try
– nomenostack