0

Is there a way to save the resultant svg jvectormap as a png? I would like users to be able to click on a save or download button, and be able to download the map in some sort of image format to their desktop.

acullen72
  • 817
  • 2
  • 9
  • 19
  • possible duplicate of [Rasterizing an in-document SVG to Canvas](http://stackoverflow.com/questions/8158312/rasterizing-an-in-document-svg-to-canvas) – Lukas Vrabel Sep 20 '14 at 12:41
  • Lukas- the jsfiddle link that was listed here seemed more promising to my specific situation. The link you list has nothing at all to do with jvectormap, and is a generic discussion of svg to canvas, which is NOT my question. Is there any way to restore the answer that was given here? I don't feel these two questions are duplicates. – acullen72 Sep 20 '14 at 16:49
  • Sorry, I cant restore comments, I just flagged this as possible duplicate in goot faith it will solve your problem. Why it is not possible to use generic svg to canvas to png solution to your problem? – Lukas Vrabel Sep 20 '14 at 19:02

1 Answers1

1

There are several ways to do this, here is a most efficient way (by using canvg), here is a 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
}
Goran.it
  • 5,991
  • 2
  • 23
  • 25