我设法在我的硬盘驱动器上保存了一张使用 html2canvas 使用 Google Maps API 生成的 map 的屏幕截图。我现在尝试用 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 脚本来创建 map 并截取屏幕截图:
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();
}
});
}
我使用一秒钟的超时时间来确保在截取屏幕截图之前已正确创建 map 。为了确保是这种情况，我什至在我的 DOM 中创建了一个按钮，在单击时调用 screenshot() 函数，因此我确信渲染时间不是问题。
我在这里读过:Print Mapbox/Leaflet Map由于某种固定布局，html2canvas 无法正确打印 map 。我想知道为什么它曾经与谷歌地图一起工作，但没关系。你知道吗？
最佳答案
确保在您的 map 初始化中将 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);
}
});
})
});
关于javascript - 使用 html2canvas 截图 MapBox 创建一个黑色的 jpg，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34440687/