0
117
Vistashtmltocanvas no captura el mapa
Tengo el siguiente código en el que quiero capturar una captura de pantalla de donde hago clic, incluido el mapa.
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <style> #map,#my_location { height: 500px; } </style> </head> <body> <div id="map"></div> <script src="static/html2canvas.js"></script> <script src="static/jquery-3.5.1.min.js"></script> <script> var mymap = L.map('map').setView([51.505, -0.09], 13); L.tileLayer( "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {"detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false} ).addTo(mymap); var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); const screenshotTarget = document.body; html2canvas(document.getElementById("map")).then((canvas) => { const base64image = canvas.toDataURL("image/jpg"); $("#map").html("<img src=\"\" id=\"my_location\"/>"); $("#my_location").attr({'src':canvas.toDataURL("image/jpg",1)}); }); } mymap.on('click', onMapClick); </script> </body> </html>Sin embargo, cuando hago clic en el mapa, solo se capturan las coordenadas y un marcador que excluye el mapa, consulte la imagen a continuación.
Qué se debe hacer para incluir el mapa base en la captura de htmltocanvas .
·
Juan Pablo Isaza
Responde la pregunta