使用 html2canvas 在 google 地图上下载 d3.js 叠加层的能力
The ability to download an d3.js overlay on a google map using html2canvas
对于这个项目,我有一个用户调出了一个 Google 地图,上面有一个 d3.js 叠加层。然后用户应该能够将带有叠加层的地图下载为 .png 文件供他们使用。问题是 d3.js 叠加层没有出现在下载中。请注意,我已经用 Google 地图覆盖修改了另一个 fiddle,因为我不允许显示实际数据和地图,但我已经添加了对 html2canvas 的调用来演示我的问题
$("#btnClickHere").on("click", function() {
//get transform value
var transform = $(".gm-style>div:first>div").css("transform");
var comp = transform.split(","); //split up the transform matrix
var mapleft = parseFloat(comp[4]); //get left value
var maptop = parseFloat(comp[5]); //get top value
$(".gm-style>div:first>div").css({
//get the map container. not sure if stable
"transform": "none",
"left": mapleft,
"top": maptop,
});
html2canvas($("#map")[0], {
useCORS: true,
background: "#E8F0F6",
onrendered: function(canvas) {
$(".gm-style>div:first>div").css({
left: 0,
top: 0,
"transform": transform
});
// $this.appendChild(canvas);
var a = document.createElement('a');
a.download = name;
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
},
width: 800,
height: 500,
});
});
你的SVG定位很奇怪:
.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;
}
我最初认为它就在页面之外。搬起来果然不错:
.SvgOverlay svg {
position: absolute;
top: 0px;
left: 0px;
}
给它合适的尺寸:
var svg = layer.append("svg").attr("width",500).attr("height",500);
并移除奇怪的重新定位:
return [pixelCoordinates.x, pixelCoordinates.y];
它覆盖在 png 中,已更新 fiddle here。
编辑
哦还有一件事,看起来您需要在元素上显式设置样式以将它们带入结果 canvas。更新上面的link。
.attr("d", path)
.style("fill", "orange").style("stroke-width", 2).style("fill-opacity",0.3).style("stroke","orange");
对于这个项目,我有一个用户调出了一个 Google 地图,上面有一个 d3.js 叠加层。然后用户应该能够将带有叠加层的地图下载为 .png 文件供他们使用。问题是 d3.js 叠加层没有出现在下载中。请注意,我已经用 Google 地图覆盖修改了另一个 fiddle,因为我不允许显示实际数据和地图,但我已经添加了对 html2canvas 的调用来演示我的问题
$("#btnClickHere").on("click", function() {
//get transform value
var transform = $(".gm-style>div:first>div").css("transform");
var comp = transform.split(","); //split up the transform matrix
var mapleft = parseFloat(comp[4]); //get left value
var maptop = parseFloat(comp[5]); //get top value
$(".gm-style>div:first>div").css({
//get the map container. not sure if stable
"transform": "none",
"left": mapleft,
"top": maptop,
});
html2canvas($("#map")[0], {
useCORS: true,
background: "#E8F0F6",
onrendered: function(canvas) {
$(".gm-style>div:first>div").css({
left: 0,
top: 0,
"transform": transform
});
// $this.appendChild(canvas);
var a = document.createElement('a');
a.download = name;
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
},
width: 800,
height: 500,
});
});
你的SVG定位很奇怪:
.SvgOverlay svg {
position: absolute;
top: -4000px;
left: -4000px;
width: 8000px;
height: 8000px;
}
我最初认为它就在页面之外。搬起来果然不错:
.SvgOverlay svg {
position: absolute;
top: 0px;
left: 0px;
}
给它合适的尺寸:
var svg = layer.append("svg").attr("width",500).attr("height",500);
并移除奇怪的重新定位:
return [pixelCoordinates.x, pixelCoordinates.y];
它覆盖在 png 中,已更新 fiddle here。
编辑
哦还有一件事,看起来您需要在元素上显式设置样式以将它们带入结果 canvas。更新上面的link。
.attr("d", path)
.style("fill", "orange").style("stroke-width", 2).style("fill-opacity",0.3).style("stroke","orange");