jvectormap을 브라우저에서 png로 저장하십시오.

결과 svg jvectormap을 png로 저장하는 방법이 있습니까? 사용자가 저장 버튼이나 다운로드 버튼을 클릭하여 바탕 화면에 이미지 형식의지도를 다운로드 할 수있게하고 싶습니다.jvectormap을 브라우저에서 png로 저장하십시오.

출처

2014-09-19 acullen72

가능 중복 (canvg를 사용하여) 여기에 가장 효율적인 방법이며,이 작업을 수행하는 여러 가지 방법이 있습니다 : /stackoverflow.com/questions/8158312/rasterizing-an-in-document-svg-to-canvas) –

루카스 - 여기서 열거 된 jsfiddle 링크가 내 구체적인 상황에 더 유망 해 보였다. 당신이 열거 한 링크는 jvectormap과 전혀 관련이 없으며, 나의 질문이 아닌 캔버스에 대한 svg에 대한 일반적인 토론이다. 여기에 주어진 답변을 복원 할 수있는 방법이 있습니까? 이 두 가지 질문이 중복되는 것 같지 않습니다. – acullen72

죄송 합니다만, 코멘트를 복원 할 수 없습니다. 나는 가능한 한이 문제를 해결할 goot faith에서 중복 된 것으로 표시했습니다. 왜 당신의 문제에 대한 솔루션을 캔버스에서 PNG로 일반 svg를 사용할 수없는 이유는 무엇입니까? –

여기 가 (HTTP [캔버스에의-문서 SVG를 래스터 화]의 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 
}

출처

2014-09-29 16:25:34

jvectormap을 브라우저에서 png로 저장하십시오.

답변

관련 문제