从浏览器将 jvectormap 保存为 png答案

【问题标题】：Save jvectormap as a png from the browser从浏览器将 jvectormap 保存为 png
【发布时间】：2014-09-19 15:43:29
【问题描述】：

有没有办法将生成的 svg jvectormap 保存为 png？我希望用户能够单击保存或下载按钮，并能够以某种图像格式将地图下载到他们的桌面。

【问题讨论】：

Rasterizing an in-document SVG to Canvas 的可能重复项
Lukas- 此处列出的 jsfiddle 链接似乎更适合我的具体情况。您列出的链接与 jvectormap 完全无关，并且是对 svg 到画布的一般讨论，这不是我的问题。有没有办法恢复这里给出的答案？我不觉得这两个问题是重复的。
抱歉，我无法恢复 cmets，我只是将其标记为可能重复，相信它会解决您的问题。为什么不能使用通用 svg to canvas to png 解决您的问题？

【解决方案1】：

有几种方法可以做到这一点，这是一种最有效的方法（使用canvg），这是working example on JSfiddle..

$(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
}

【讨论】：