Screen Capture (Map)

0

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 &copy; OpenCycleMap, Dados do Mapa &copy; 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:

link

    
asked by anonymous 10.09.2018 / 13:36

0 answers