拍摄包含 gmap（Google 地图）的 div 快照时，html2canvas 无法正常工作

Question

我正在将内部包含 google 地图的 div 转换为图像，但它没有按原样显示。

我正在使用 angular4。

我的原图如下：

但是用html2canvas转换后显示如下：

我的转换代码如下：

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");
      }
    });
  }

Answer 1

代替将包含 google 映射的 div 转换为 canvas 我按照以下步骤操作并达到了我的要求，只是它没有给出路线

Original div After Conversion

1. 获取地图URL

   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. 如果您只需要地图图像，请执行 ajax 请求以获取图像 blob

   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. 否则创建与 div 相同的重复内容，我们要截取屏幕截图，但代替 google 地图创建带有 src 的 img 标签，如在第一步中找到的那样

   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"); } }); }) }