Javascript 在整个页面截图中包含开放层截图

我有一个div，让我们称他为“global”，在他体内我有了openlayer的标题和两张地图。
我可以通过以下方式通过html2canvs获取全局的快照：

    html2canvas(globalElement).then((canvas) => {
      this.screenShot(canvas.toDataURL());
    });

但快照中的openlayers显示为两个黑色div，如下所示：

我可以通过以下代码分别获得开放层视图：

     this.map.once('rendercomplete', function(event) {
          const canvas = event.context.canvas;
          console.log(canvas.toDataURL()); // the open layer screen shot
       });
     this.map.renderSync();

我怎样才能把所有这些整合成一个屏幕截图

-----编辑----

在@Mike的帮助下，我正在使用domtoImage，如下示例：

     this.map.once('rendercomplete', function(event) {
         domtoimage.toPng(globalElement)
        .then((dataURL) => {
            console.log(dataURL);
        });
       });
     this.map.renderSync();

我可以用开放层地图得到所有div的图像。 由此产生了一个新的问题，角材质的垫子图标没有正确显示在domtoimage中，它显示的是图标的名称，而不是图标。

---

如何修复此问题？

OpenLayers 6的每一层都有一个画布，该示例已更改为使用DOMTIMAGE，它可能适用于任何版本的OpenLayers的整个页面。@Mike工作得很好，但屏幕截图中没有显示角度图标，你知道为什么吗？这将是一个角度问题，我建议您将Angular.and domtoimage添加到标记SoPenlayers 6将为每个层提供一个画布，并且示例已更改为使用domtoimage，它可能适用于任何版本的OpenLayers的整个页面。@Mike工作得很好，但Angular图标没有显示在屏幕截图中，你知道为什么吗？这将是一个角度问题，我建议你在标签中添加Angular.and domtoimage