使用 html2canvas 截屏 MapBox 创建黑色 jpg答案

【问题标题】：Screenshoting MapBox using html2canvas creates a black jpg使用 html2canvas 截屏 MapBox 创建黑色 jpg
【发布时间】：2016-03-30 04:25:12
【问题描述】：

我设法在我的硬盘驱动器上保存了一张使用 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() 函数，所以我确信渲染时间不是问题。

我在这里读到：Print Mapbox/Leaflet Map html2canvas 由于某种固定布局而无法正确打印地图。我想知道为什么它曾经与谷歌地图一起工作，但没关系。你对此有什么想法吗？

【问题讨论】：

标签： javascript mapbox html2canvas

【解决方案1】：

Mapbox 有一个内置的截图 api：

https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-image/

或通过 mapboxgl 将画布数据抓取到图像，您需要设置 preserveDrawingBuffer 选项才能使其正常工作，默认情况下处于关闭状态...请参阅 https://www.mapbox.com/mapbox-gl-js/api/#Map

 var img = new Image();
 var mapCanvas = document.querySelector('.mapboxgl-canvas');
 img.src = mapCanvas.toDataURL();
 window.document.body.appendChild(img);

【讨论】：

谢谢，但是这个截图 api 不适用于 mapbox-gl api。不过，它对传统的 mapbox 地图很有用。
嗯...既然我们正在谈论它的 webgl / canvas，我敢打赌你可以从中获取图像数据。查看我对文件代码的编辑

【解决方案2】：

确保在地图初始化中将 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);
          }
      });
  })
});

【讨论】：