【问题标题】：html2canvas is not working properly while taking snap of a div containing gmap (Google Map)html2canvas 在拍摄包含 gmap 的 div 时无法正常工作（谷歌地图）
【发布时间】：2017-11-10 02:50:30
【问题描述】：
我正在将一个包含谷歌地图的 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");
}
});
}
【问题讨论】：
标签：
javascript
image
angular
canvas
html2canvas
【解决方案1】：
我没有将包含谷歌地图的 div 转换为画布，而是按照以下步骤完成了我的要求，但它没有给出路线
原div
转换后
-
获取地图网址
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()
}
}
-
如果您只需要地图图像，请执行 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();
});
}
-
否则创建与我们要截屏的 div 相同的重复内容，但代替谷歌地图创建一个带有 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");
}
});
})
}