如何使用html2canvas保存div

Question

I have a page with a draggable-directions map, I want to insert a button to save a screen of a map div with html2canvas. 我有一个带有可拖动方向地图的页面，我想插入一个按钮以使用html2canvas保存地图div的屏幕。 I have this code: 我有以下代码：

 <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Draggable directions</title> <style> #right-panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel select, #right-panel input { font-size: 15px; } #right-panel select { width: 100%; } #right-panel i { font-size: 12px; } html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; float: left; width: 63%; height: 100%; } #right-panel { float: right; width: 34%; height: 100%; } .panel { height: 100%; overflow: auto; } </style> </head> <body> <div id="prova"></div> <div id="map"></div> <div id="right-panel"> <p>Total Distance: <span id="total"></span></p> </div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -24.345, lng: 134.46} // Australia. }); var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true, map: map, panel: document.getElementById('right-panel') }); directionsDisplay.addListener('directions_changed', function() { computeTotalDistance(directionsDisplay.getDirections()); }); displayRoute('Perth, WA', 'Sydney, NSW', directionsService, directionsDisplay); } function displayRoute(origin, destination, service, display) { service.route({ origin: origin, destination: destination, waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}], travelMode: 'DRIVING', avoidTolls: true }, function(response, status) { if (status === 'OK') { display.setDirections(response); } else { alert('Could not display directions due to: ' + status); } }); } function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (var i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000; document.getElementById('total').innerHTML = total + ' km'; } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuW8LXNxEX76FBnWPHKH9ddSYkwAKiszM&callback=initMap"> </script> </body> </html>

How I can use html2canvas? 我如何使用html2canvas？ I tried using the example code in the script website but it is not working. 我尝试在脚本网站中使用示例代码，但无法正常工作。

Answer 1

As an alternative, you can use dom-to-image, it works perfectly fine : 另外，您也可以使用dom-to-image，它工作得很好：

https://github.com/tsayen/dom-to-image https://github.com/tsayen/dom-to-image

如何使用html2canvas保存div

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-08 12:11:24

如何使用html2canvas保存div

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-08 12:11:24

解决方案1
0 已采纳 2017-05-08 12:11:24