<svg> एचटीएमएल 5 पीएनजी या छवि

Question

मुझे डी 3 जावास्क्रिप्ट लाइब्रेरी के साथ उत्पन्न चार्ट मिल गए हैं और मुझे इन्हें पीएनजी या एसवीजी फ़ाइल करने के लिए सहेजने की आवश्यकता है।

क्या कोई पुस्तकालय है जो नौकरी बनाती है?

मैं इस https://github.com/sampumon/SVG.toDataURL पाया, लेकिन फ़ायरफ़ॉक्स कंसोल में मेरी एचटीएमएल 5 पर काम नहीं कर रहा, मैं यह त्रुटि आई:

NS_ERROR_NOT_AVAILABLE: घटक उपलब्ध नहीं है [Interrompi प्रति questo errore]

ctx.drawImage (आईएमजी, 0, 0); चेकआउट this page:

Answer 1

सर्वर साइड स्क्रिप्ट विधि

यहाँ (हालांकि यह सर्वर-साइड स्क्रिप्टिंग, जो आपकी आशा से अलग हो सकता का उपयोग करता है) png को svg तत्वों को बचाने के लिए एक सरल तरीका है।

जैसा कि लेखक द्वारा दस्तावेज किया गया है, क्लाइंट svg तत्व निकालें (XMLSerializer.serializeToString का उपयोग करके) और इसे सर्वर पर भेजें; सर्वर इसे पीएनजी में परिवर्तित करता है और इसे वापस ग्राहक को भेजता है। सर्वर किसी भी प्रोग्राम का उपयोग कर सकता है जो सुविधाजनक है (इस मामले में आरएसवीजी-कन्वर्ट)।

Canvg पुस्तकालय

आप ग्राहक के पक्ष (check it out!) पर यह करने के लिए इस लाइब्रेरी का उपयोग कर सकते हैं:

canvg is a SVG parser and renderer. It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element

इस तरह यह प्रयोग करें:

//load a svg snippet in the canvas with id = 'drawingArea' 
canvg(document.getElementById('drawingArea'), '<svg>... </svg>') 

तो फिर तुम toDataURL विधि का उपयोग कर सकते हैं: document.getElementById('drawingArea').toDataURL('image/png');

Answer 2

पूर्व developer.mozilla.org से पर्याप्त कैनवास तत्व का उपयोग कर पीएनजी को svg निर्यात करने का तरीका दर्शाता है।

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
      '<foreignObject width="100%" height="100%">' + 
      '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + 
      '<em>I</em> like ' + 
      '<span style="color:white; text-shadow:0 0 2px blue;">' + 
      'cheese</span>' + 
      '</div>' + 
      '</foreignObject>' + 
      '</svg>'; 

var DOMURL = window.URL || window.webkitURL || window; 

var img = new Image(); 
var svg = new Blob([data], {type: 'image/svg+xml'}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
    var png_img = canvas.toDataURL("image/png"); 
} 

img.src = url;