截图一张网络地图
截图一张网络地图
提问于 2022-07-15 16:48:21
我刚从javascript开始，我正在尝试创建一个交互式的web地图.
我想要能够定位地图，然后按下一个按钮，将截图和保存到电脑。
这是我地图的代码.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '[TOKEN]';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/charlie-enright/cl5b8bjil002y14o5u8xrssah', // style URL
center: [-4.369240916438415, 51.925803756014965], // starting position [lng, lat]
zoom: 8, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
</body>
</html>我尝试过使用html2canvas (https://codepen.io/samsammurphy/pen/VXdOPv)，但是按钮似乎在地图后面的一个图层中结束了，我无法拍摄显示的地图的屏幕截图。
任何想法，我如何可以创建一个按钮，允许截图，以保存到计算机将非常感谢。
谢谢,
回答 2
Stack Overflow用户
发布于 2022-07-15 17:32:16
下面是一个使用map.getCanvas().toDataURL()并将img标记注入DOM的示例。(这不是我的例子，我是在山姆墨菲https://codepen.io/samsammurphy/pen/VXdOPv的代码页上找到的)
$('button').click(function() {
var img = map.getCanvas().toDataURL();
var width = $('#screenshotPlaceholder').width()
var height = $('#screenshotPlaceholder').height()
var imgHTML = `<img src="${img}", width=${width}, height = ${height}/>`
$('#screenshotPlaceholder').empty();
$('#screenshotPlaceholder').append(imgHTML);
});
});我发现这个代码由于过期的访问令牌而无法工作，所以这里有一个叉子，如果您想尝试它，它可以工作。
Stack Overflow用户
发布于 2022-07-16 11:03:04
下面是我用html2canvas拍摄地图截图的代码
html2canvas(document.getElementById("map"), {useCORS:true}).then(canvas => {
var pseudolink = document.createElement('a');
pseudolink.download = 'myMapScreenshot.png';
pseudolink.href = canvas.toDataURL()
pseudolink.click();
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72997299
复制相关文章
相似问题
腾讯云开发者
