d3.js ग्राफ को pdf/jpeg

Question

में कनवर्ट/सेव करने के लिए कैसे करें मैं एक मौजूदा डी 3-एसवीजी ग्राफ को फ़ाइल में सहेजने या परिवर्तित करने के लिए क्लाइंट-साइड/जावास्क्रिप्ट फ़ंक्शन पर काम कर रहा हूं। मैंने बहुत कुछ खोजा है और कुछ सिफारिशें पाई हैं, मुख्य रूप से canvas.toDataURL() का उपयोग कर रही हैं।

मैं अपने पृष्ठ में कोई <canvas> है, और उपयोग करने के बजाय: d3.select("body").append("svg").... मैं भी <canvas> को एसवीजी संलग्न करने के लिए कोशिश की है, लेकिन कुछ नहीं होता।

आप कृपया मुझे इस अपवाद को हल करने में मदद कर सकते हैं:

Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL' 

आप

Answer 1

धन्यवाद एक कैनवास के भीतर अपने svg प्रदर्शित करने के लिए, आपको पहले एक पार्सर/रेंडरर सुविधा का उपयोग परिवर्तित करने के लिए है इस तरह के रूप http://code.google.com/p/canvg/

(कोड से अनुकूलित: Convert SVG to image (JPEG, PNG, etc.) in the browser, परीक्षण नहीं)

// the canvg call that takes the svg xml and converts it to a canvas 
canvg('canvas', $("#my-svg").html()); 

// the canvas calls to output a png 
var canvas = document.getElementById("canvas"); 
var img = canvas.toDataURL("image/png"); 

Answer 2

के रूप में इस सवाल का Convert SVG to image (JPEG, PNG, etc.) in the browser

पर इस टिप्पणी में @Premasagar द्वारा बताया borwser दोनों एसवीजी और कैनवास आप इस तकनीक https://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

function importSVG(sourceSVG, targetCanvas) { 
    // https://developer.mozilla.org/en/XMLSerializer 
    svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); 
    var ctx = targetCanvas.getContext('2d'); 

    // this is just a JavaScript (HTML) image 
    var img = new Image(); 
    // http://en.wikipedia.org/wiki/SVG#Native_support 
    // https://developer.mozilla.org/en/DOM/window.btoa 
    img.src = "data:image/svg+xml;base64," + btoa(svg_xml); 

    img.onload = function() { 
     // after this, Canvas’ origin-clean is DIRTY 
     ctx.drawImage(img, 0, 0); 
    } 
} 

Answer 3

बस एक सिर ऊपर है कि मैं इस अवधारणा को बदल दिया उपयोग कर सकते हैं का समर्थन करता है एक छोटी जावास्क्रिप्ट लाइब्रेरी में: https://github.com/krunkosaurus/simg

यह किसी भी एसवीजी को एक छवि में बदलने या डाउनलोड करने के लिए एक छवि में परिवर्तित करता है। यहां से लिया गया विचार: http://techslides.com/save-svg-as-an-image/

Answer 4

सिम लाइब्रेरी ने मॉविस लेडफोर्ड द्वारा निर्मित और सुझाव दिया है कि ऊपर दिए गए मेरे एसवीजी चार्ट को डिंपल के साथ डाउनलोड करने के लिए महान काम करने की इजाजत दी गई है।

हालांकि मुझे इसे काम करने के लिए कोड के एक पहलू को बदलने की आवश्यकता थी। ToString() प्रोटोटाइप के अंदर, प्रत्येक लूप (लाइन 37) के अंदर, यदि आप "svg.setAttribute (..)" को "svg [0] .setAttribute" में बदलते हैं, तो यह "setAttribute (..) को कम करेगा एक समारोह "त्रुटि। इसी प्रकार एसवीजी (लाइन 3 9) के बाद "[0]" जोड़कर वापसी विवरण में नीचे ही किया जाना चाहिए।

मुझे डाउनलोड की गई छवि को एक और सही आकार बनाने के लिए "कैनवास.विड्थ" और "कैनवास.हेइट" (लाइन 48 & 49) मैन्युअल रूप से संपादित करने के लिए कोनवास() प्रोटोटाइप में असाइनमेंट करना था (यह था पहले चार्ट के ऊपरी बाएं कोने में एक स्थिर 300x150 वर्ग डाउनलोड कर रहा था)।