html2canvas动态呈现div

Question

我正在尝试使用html2canvas（http://html2canvas.hertzen.com）截取包含谷歌地图视图的网页截图，但我遇到的问题是截止的截图是白色的，除了标记。什么（可能）使问题复杂化的是我（试图）创建一个React应用程序。

我使用此代码截取屏幕截图：

takeScreenshot = () => {
    let googleMapsView = document.querySelector('.google-map');

    html2canvas(googleMapsView).then((canvas) => {
        let imgData = canvas.toDataURL('image/png');
        console.log(imgData);
    });
}

这是我正在尝试截取屏幕截图的页面：

上面的代码生成以下图像：

正如您所看到的，它会生成屏幕截图并捕获标记和底部的“地图数据©2018 Google”，但生成的屏幕截图仍为空白。

在他们的Github上的文档中，我看到了一个预加载选项：https://github.com/niklasvh/html2canvas/wiki/Documentation#preload-content

但是，自0.5.0 beta版本以来，它似乎已从库中删除了 - 它们现在位于1.0.0 alpha，所以回到这样一个过时的库并不是一个真正的选择。

在拍摄截图之前，如何告诉html2canvas等待GMaps组件呈现？

Answer 1

在您的情况下，您需要添加param useCORS才能与Google地图一起使用：

takeScreenshot = () => {
let googleMapsView = document.querySelector('.google-map');

html2canvas(googleMapsView, {useCORS: true}).then((canvas) => {
    let imgData = canvas.toDataURL('image/png');
    console.log(imgData);
});

}

Answer 2

您是否尝试将代码放入Google地图监听器

中

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
    takeScreenshot = () => {
        let googleMapsView = document.querySelector('.google-map');

        html2canvas(googleMapsView).then((canvas) => {
            let imgData = canvas.toDataURL('image/png');
            console.log(imgData);
         });
     }
});

另请参阅Google Maps Reference中的事件部分。