Блог

У меня был div — пусть назовет его «глобальным» — внутри него у меня был заголовок и две карты openlayer.
Таким образом я могу получить снимок глобального по html2canvs:

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

Но openlayers на снимке выглядели как два черных элемента, подобных этому:

Я могу получить вид открытого слоя отдельно с помощью этого кода:

      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 с картой открытого слоя.
Из-за этого возник новый вопрос: значки mat в angular material не отображались должным образом с помощью domtoimage, в нем отображается название значка, а не значок.
Как я могу это исправить?