0

I'm am converting a div containing google map inside to image but it is not showing as it was.

I'm using angular4.

My original image was as follows:

original div

but after converting with html2canvas shows as follows:

enter image description here

My code for conversion is as follows:

html2Cnv(){
    let self = this;
    let mycnvHtml: HTMLVideoElement = self.mycnvHtml.nativeElement;
    html2canvas(mycnvHtml, {
      onrendered: function(canvas1) {
        canvas1.toBlob((blob: Blob)=>{
          let file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
            type: 'image/png'
          });
          self.fileShare.addFile(file);
          self.onDone.emit(file);
        }, "image/png");
      }
    });
  }
Akhilesh Kumar
  • 9,085
  • 13
  • 57
  • 95
  • the problem was discussed here https://github.com/niklasvh/html2canvas/issues/345. Maybe this question is related to yours: https://stackoverflow.com/questions/24046778/html2canvas-does-not-work-with-google-maps-pan/24281734#24281734 – r3bel Jun 08 '17 at 11:48
  • any alternate for it? – Akhilesh Kumar Jun 08 '17 at 12:02
  • You may want to look at creating a static map with a polyline plotted on it, look here for inspiration https://stackoverflow.com/questions/38302858/google-static-maps-with-directions – jjr2000 Jun 08 '17 at 17:18

1 Answers1

0

In place of converting div containing google map to canvas I followed following steps and I reached closed to my requirement except it didn't gave route

Original div enter image description here After Conversion enter image description here

  1. Get URL of Map

    getCordDistance() { let radlat1 = Math.PI * this.locStart.lat/180; let radlat2 = Math.PI * this.locEnd.lat/180; let theta = this.locStart.lng-this.locEnd.lng; let radtheta = Math.PI * theta/180; let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); dist = Math.acos(dist); dist = dist * 180/Math.PI; dist = dist * 60 * 1.1515; /*if (unit=="K") { dist = dist * 1.609344 } if (unit=="N") { dist = dist * 0.8684 }*/ return dist }

    getImgUrl(cll){ let dist=this.getCordDistance(); let comn={ lat:((this.locStart.lat+this.locEnd.lat)/2), lng:((this.locStart.lng+this.locEnd.lng)/2) }; try { let ppp=document.getElementById('map456'); this.dynamicImg='https://maps.googleapis.com/maps/api/staticmap?' + 'center=' +comn.lat+','+comn.lng + '&zoom='+(dist<1?15:dist>1800?3:dist>900?4:this.mapRef.getZoom())+ '&size='+ppp.offsetWidth+'x'+ppp.offsetHeight + '&maptype=roadmap'+ '&markers=color:blue%7Clabel:S%7C'+this.locStart.lat+','+this.locStart.lng + '&markers=color:red%7Clabel:C%7C'+this.locEnd.lat+','+this.locEnd.lng + '&key=myKey'; }catch(er){console.log(er)} if(cll){ cll() } }

  2. Do an ajax request to get image blob if you just need image of map

    html2Cnv(){ let self = this; this.getImgUrl(()=>{ let oReq = new XMLHttpRequest(); oReq.open("GET", this.dynamicImg, true); oReq.responseType = "arraybuffer"; oReq.onload =(oEvent)=>{ let blob = new Blob([oReq.response], {type: "image/png"}); let file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', { type: 'image/png' }); self.fileShare.addFile(file); self.onDone.emit(file); }; oReq.send(); }); }

  3. Else create a duplicate content same as the div we want to take screenshot but in place of google map create an img tag with src as found in first step

    html2Cnv(){ let self = this; this.getImgUrl(()=>{ html2canvas(this.canvas1, { onrendered: function(canvas1) { canvas1.toBlob((blob: Blob)=>{ let file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', { type: 'image/png' }); self.fileShare.addFile(file); self.onDone.emit(file); }, "image/png"); } }); }) }

Akhilesh Kumar
  • 9,085
  • 13
  • 57
  • 95