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);
    });
}

这是我要截屏的页面：

以上代码生成如下图片：

如您所见，它会生成屏幕截图并捕获标记和底部的“Map Data ©2018 Google”，但是生成的屏幕截图仍然是空白的。

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

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

如何告诉 html2canvas 在截屏之前等待 GMaps 组件被渲染？

Answer 1

在您的情况下，您需要添加参数 useCORS 以将其与谷歌地图一起使用：

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.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 中的事件部分。