राफेलजेएस से एसवीजी

Question

मैं उपयोगकर्ता को एसवीजी ग्राफ़िक को पीएनजी के रूप में डाउनलोड करने की कोशिश कर रहा हूं। आप JSFIDDLE

एसवीजी से कैनवास भाग के माध्यम से कोड तक पहुंच सकते हैं।

पहले से ही कैनव्यू और मोज़िलास कोड को जोड़ा गया है और उनमें से कोई भी काम नहीं कर रहा है। कैनवास 2 इमेज भी जोड़ा गया है जो कैनवास तत्व के साथ काम करना चाहिए।

Answer 1

कैनेग विकसित करने वाले गैबेलरर के लिए धन्यवाद, इसे मुझे ठीक करने में मदद मिली

1. Problem saving as png a SVG generated by Raphael JS in a canvas के आधार पर, svg में टैग के बीच सभी रिक्त स्थान बंद पट्टी
2. Problem saving as png a SVG generated by Raphael JS in a canvas छवि के href के आधार पर XLink के रूप में बदल दिया है: href
3. gabelerner के आधार पर कहा, xmlns: XLink = "http: //www.w3 .org/1999/XLink "svg xlmns में
4. gabelerner के आधार पर, छवि उसी डोमेन में होना चाहिए - कोई crossside
5. gabelerner के आधार पर, Canvas2Image फ्रेम जो कोई बेला का मतलब के भीतर काम नहीं कर सकता है (इस प्रकार मैं नष्ट कर दिया बेला इसे स्पष्ट करने के लिए भाग)

यहाँ नमूना एसवीजी और जे एस हिस्सा आप शीघ्र उत्तर के लिए

var svg_XML_NoSpace = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Raphaël</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>'; //based on gabelerner 

//add canvas into body   
var canvasID = "myCanvas"; 
var canvas = document.createElement('canvas'); 
canvas.id = canvasID; 
document.body.appendChild(canvas); 

//convert svg to canvas 
canvg(document.getElementById(canvasID), svg_XML_NoSpace, { 
    ignoreMouse: true, ignoreAnimation: true, 
    renderCallback: function() { 
     //save canvas as image 
     Canvas2Image.saveAsPNG(document.getElementById(canvasID)); 
     } 
}); 

Answer 2

एसवीजी को fabric.js के साथ कैनवास में कनवर्ट करने का प्रयास करें (यहां एक demo है, जिसमें वास्तविक समय में svg को कैनवास में परिवर्तित किया जाता है, जब आप साइडबार में बटन पर क्लिक करते हैं)।

फैब्रिक सभी एसवीजी सुविधाओं का समर्थन नहीं करता है लेकिन इसे सरल मामलों के लिए काम करना चाहिए।

यहां loadSVGFromURL का उपयोग करने का एक उदाहरण दिया गया है।

1) आप < कैनवास की आवश्यकता होगी> तत्व:

<canvas id="my-canvas"></canvas> 

2) कैनवास से बाहर fabric.Element प्रारंभ:

var canvas = new fabric.Element('my-canvas'); 

3) एक्सएचआर के माध्यम से एसवीजी लायें:

canvas.loadSVGFromURL('path_to_your_shape.svg', function(objects, options) { 

    // `objects` is now an array of fabric objects representing 
    // svg shapes from the document 
    // if it's one shape, we'll just work with that 
    // if it's more than one — we'll create a unified group out of it, 
    // using `fabric.PathGroup` 

    var loadedObject = objects.length > 1 
    ? new fabric.PathGroup(objects, options) 
    : objects[0]; 

    // we can now change object's properties like left, top, angle, opacity, etc. 
    // this is not necessary, of course 

    loadedObject.set({ 
    left: 123, 
    top: 321, 
    angle: 55, 
    opacity: 0.3 
    }); 

    // and add it to canvas 

    canvas.add(loadedObject); 
});