एचवीएमएल कैनवास को एसवीजी में परिवर्तित करने का तरीका?

Question

संपादन के लिए एचवीएमएल कैनवास को एसवीजी में परिवर्तित करने की आवश्यकता है? सूचक की सराहना की जाएगी

Answer 1

कैनवास-svg आप 2 डी http://code.google.com/p/canvas-svg/ आप canvg साथ रिवर्स कर सकते हैं बचाने की सुविधा देता है http://code.google.com/p/canvg/

Answer 2

भी देखें http://code.google.com/p/html5-canvas-svg/

Fabric.js एक "कैनवास-टू-svg" पार्सर होने का विज्ञापन करता है, और इसमें एक डेमो है जो स्पष्ट रूप से converts canvas to SVG है। जबकि अन्य आइटम काम करते हैं और फिर "एसवीजी को रास्टरराइज कैनवास" करते हैं, तो इसमें डिफ़ॉल्ट छवि को परिवर्तित करने में कोई समस्या होती है, इसलिए आपको यह जांचना होगा कि क्या यह वास्तव में कच्चे कैनवस को एसवीजी में परिवर्तित करने में सक्षम है या केवल अगर संपादक के माध्यम से आइटम बनाते हैं।

Answer 3

canvas2svg.js आज़माएं। [Demo]

मैं इसे स्वयं की आवश्यकता में भाग गया और इसके लिए एक पुस्तकालय लिखना समाप्त कर दिया। उस समय, अन्य पुस्तकालय थोड़ा अस्पष्ट थे, या वैध एसवीजी उत्पन्न नहीं किया था।

मूल अवधारणा वही है। आप एक नकली कैनवास 2 डी संदर्भ बनाते हैं और फिर एक एसवीजी दृश्य ग्राफ उत्पन्न करते हैं जब आप कैनवास ड्राइंग कमांड कहते हैं। असल में आप एक ही ड्राइंग फ़ंक्शन का पुन: उपयोग कर सकते हैं। आप जिस संदर्भ में जाते हैं उसके आधार पर, आप या तो मानक 2 डी कैनवास पर आते हैं या एक एसवीजी दस्तावेज उत्पन्न करते हैं जिसे आप क्रमबद्ध कर सकते हैं।

आप वास्तव में एक कैनवास तत्व को "रूपांतरित नहीं कर सकते" जिसे खींचा जा रहा है, क्योंकि यह केवल एक बिटमैप है, इसलिए इसे ध्यान में रखें। जब आप एसवीजी को निर्यात करते हैं तो आप वास्तव में एक नकली संदर्भ का उपयोग कर एक ही ड्राइंग फ़ंक्शन को फिर से कॉल कर रहे हैं।

तो एक त्वरित उदाहरण के रूप में:

//create a canvas2svg mock context 
var myMockContext = new C2S(500,500); //pass in your desired SVG document width/height 

var draw = function(ctx) { 
    //do your normal drawing 
    ctx.fillRect(0,0,200,200); 
    //etc... 
} 

draw(myMockContext); 
myMockContext.getSerializedSvg(); //returns the serialized SVG document 
myMockContext.getSvg(); //inline svg 

Answer 4

मुझे लगता है कि कैनवास पहले से ही इस विधि के लिए एक svg ड्राइंग किया जाना चाहिए, लेकिन मैं खुद को एक डाउनलोड svg बटन बनाने के लिए कोशिश कर के पाठ्यक्रम में यह पाया, यह भी दौड़ा एक ही खोज में इस ढेर अतिप्रवाह प्रश्न में यह अनुमान लगाया गया कि यह प्रासंगिक हो सकता है।

से https://bramp.github.io/js-sequence-diagrams/

लाइन 200ish आसपास

, लेकिन कौन जानता है कि वह भविष्य

संपादक में साइट को संपादित कर सकते सिर्फ एक div तत्व है, और इस शोर के प्रयोजन के लिए, वह सिर्फ सामान पैकिंग है svg डाउनलोड svv में से उत्पन्न किया गया था।

diagram_div कैनवास वास्तविक svg में बैठा होता है है।

function(ev) { 
    var svg = diagram_div.find('svg')[0]; 
    var width = parseInt(svg.width.baseVal.value); 
    var height = parseInt(svg.height.baseVal.value); 
    var data = editor.getValue(); 
    var xml = '<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[' + data + ']]></source>' + svg.innerHTML + '</svg>'; 

    var a = $(this); 
    a.attr("download", "diagram.svg"); // TODO I could put title here 
    a.attr("href", "data:image/svg+xml," + encodeURIComponent(xml)); 
}