在整个页面的屏幕截图中包含开放层屏幕截图

Question

我有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，它显示图标的名称而不是图标。 我该如何解决？