我设法在硬盘上保存了使用 html2canvas 通过 Google Maps API 生成的地图的屏幕截图。我现在尝试使用 MapBox API 做同样的事情，但我在硬盘上得到的只是一张黑屏 jpg。
这是我的 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
<script src="js/html2canvas.js"></script>
</head>
<body onload="initialize()">
<div id="map"></div>
<script src="js/coordinates.js"></script>
</body>
</html>
使用此 CSS 全屏显示：
html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { width: 100%; height: 100%; }
这个 JS 脚本用于创建地图并截取屏幕截图：
mapboxgl.accessToken = 'pk.eyJ1IjoiZ2luZ2FsYWJ2IiwiYSI6ImNpaWluNXIzbDAwMjB3ZG02c2hmNGhhMnUifQ.5SC9qnrK7eEdAtwv5Z0S_Q';
var latitude = 48.858565;
var longitude = 2.347198;
function initialize()
{
var map = new mapboxgl.Map(
{
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [2.347198, 48.858565],
zoom: 16,
pitch: 35
});
setTimeout(screenshot, 1000);
}
function screenshot()
{
html2canvas(document.body,
{
useCORS: true,
onrendered: function(canvas)
{
var image = document.createElement('a');
image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
image.download = 'map.jpg';
image.click();
}
});
}
我使用一秒超时来确保在截图之前地图已正确创建。为了确保确实如此，我什至在 DOM 中创建了一个按钮，在单击时调用 Screenshot() 函数，因此我确信渲染时间不是问题。
我在这里读到：打印Mapbox/Leaflet Map，由于某种固定布局，html2canvas 无法正确打印地图。我想知道为什么它过去可以与谷歌地图一起使用，但没关系。你对此有什么想法吗？
确保在地图初始化中将preservedrawingbuffer设置为true
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v10', //hosted style id
center: [-98.5795, 39.8282], // starting position
zoom: 8, // starting zoom,
preserveDrawingBuffer: true
});
我使用了 html2canvas 和这个函数
$(function() {
$("#btnSave").click(function() {
html2canvas(document.body, {
onrendered: function(canvas) {
return Canvas2Image.saveAsPNG(canvas);
}
});
})
});
Mapbox 有内置的截图 api：
https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/
或者通过mapboxgl将画布数据抓取到图像，您需要设置
preserveDrawingBuffer var img = new Image();
var mapCanvas = document.querySelector('.mapboxgl-canvas');
img.src = mapCanvas.toDataURL();
window.document.body.appendChild(img);
我使用的是 3.2.0 版本，但没有任何效果，直到我看到这个：
https://github.com/mapbox/mapbox-gl-js/issues/2766#issuecomment-370758650
我复制下面的代码以供快速参考：
function takeScreenshot(map) {
return new Promise(function(resolve, reject) {
map.once("render", function() {
resolve(map.getCanvas().toDataURL());
});
/* trigger render */
map.setBearing(map.getBearing());
})
}
/* example */
takeScreenshot(map).then(function(data){
console.log(data);
});
即使
preserveDrawingBuffer