OpenLayer export map to Image

Question

I´m using Angular 8

I´m trying to export a image/blob of my map created with openlayer but i just cant get it to work. I even tryed using ViewChild with html2canvas but then i just get everything inside the div besides the map.

     @ViewChild('download', { static: false }) public download: ElementRef;

    pdfDownload() {
    let domElement = this.download.nativeElement as HTMLElement;
    console.log(domElement);
    html2canvas(domElement).then(canvas => {
      var imgData = canvas.toDataURL("image/png");
      console.log(imgData); //here i get a blob that has everything from the div like buttons and so on, but not the map itself thats also inside this div
      });
  }

I did see some javascript versions with openlayer were they managed to download it without using other libs but i cant manage to translate it to typescript.

Anyone that knows how to get this to work eather just using openlayer or with the html2canvas lib? Or mby even something else?

Also tryed the following with no sucess since its basicly the same thing

 pdfDownload() {
    var cnvs = document.getElementById('map');   
    html2canvas(cnvs).then(canvas => {
      var imgData = canvas.toDataURL("image/png");
      console.log(imgData); //here i get a blob that has everything from the div like buttons and so on, but not the map itself thats also inside this div
    });
  }

Answer 1

The problem was related to CORS