reactjs - 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 地图参考中的事件部分。