Svg 从浏览器中将jvectormap另存为png
有没有办法将生成的svg jvectormap保存为png?我希望用户能够单击“保存”或“下载”按钮,并能够以某种图像格式将地图下载到他们的桌面上。有几种方法可以做到这一点,下面是一种最有效的方法(使用canvg), 这是一个Svg 从浏览器中将jvectormap另存为png,svg,jvectormap,Svg,Jvectormap,有没有办法将生成的svg jvectormap保存为png?我希望用户能够单击“保存”或“下载”按钮,并能够以某种图像格式将地图下载到他们的桌面上。有几种方法可以做到这一点,下面是一种最有效的方法(使用canvg), 这是一个 可能是Lukas的复制品——这里列出的JSFIDLE链接似乎更适合我的具体情况。您列出的链接与jvectormap毫无关系,只是svg到画布的一般讨论,这不是我的问题。有没有办法恢复这里给出的答案?我不觉得这两个问题是重复的。对不起,我不能恢复评论,我只是把这个标记为可能
可能是Lukas的复制品——这里列出的JSFIDLE链接似乎更适合我的具体情况。您列出的链接与jvectormap毫无关系,只是svg到画布的一般讨论,这不是我的问题。有没有办法恢复这里给出的答案?我不觉得这两个问题是重复的。对不起,我不能恢复评论,我只是把这个标记为可能的重复,因为我相信它会解决你的问题。为什么不能使用通用svg从画布到png解决您的问题?
$(function(){
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: 'white',
normalizeFunction: 'polynomial',
regionsSelectable: true,
regionsSelectableOne: true,
zoomOnScroll: true,
zoomButtons: true,
regionStyle: {
initial: {
fill: "red",
"fill-opacity": 1,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
fill: "blue",
"fill-opacity": 1
},
selected: {
fill: "#EC6602",
"fill-opacity": 1
},
selectedHover: {
fill: "#EC6602",
"fill-opacity": 1
}
},
onRegionClick: function(e, country){
var map = $("#world-map").vectorMap("get", "mapObject");
$("#world-map").vectorMap("set", "focus", country);
}
});
});
function saveImage() {
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(document.querySelector("#world-map svg"));
canvg(document.getElementById('canvas'), sXML,{ ignoreMouse: true, ignoreAnimation: true })
var imgData = canvas.toDataURL("image/png");
window.location = imgData.replace("image/png", "image/octet-stream");
// You can use http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js
// if you want to force filename.ext
}