Reactjs html2canvas动态渲染div

我试图使用

html2canvas

（）拍摄包含谷歌地图视图的页面截图，但我遇到了一个问题，结果截图除了标记外是白色的。使问题（可能）复杂化的是，我正在（尝试）创建一个React应用程序

我使用以下代码截图：

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

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

这是我试图截图的页面：

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

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

在Github上的文档中，我看到了一个在此处预加载的选项：

然而，从

0.5.0 beta

版本开始，这似乎已经从库中删除了-它们现在是

1.0.0 alpha

，因此回到这样一个过时的库并不是一个真正的选择

---

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

您是否尝试将代码放入谷歌地图监听器中

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

---

另请参见。

中的事件部分。在您的情况下，您需要添加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);
});

---

}

遗憾的是，我没能让它工作。最终结果仍然是白色图像。我应该在哪里注册此侦听器？

componentDidMount

是否是合适的位置？您应该在实例化映射后注册它