एसवीजी के लिए कैनवास की toDataURL विधि के बराबर है?

Question

मैं पिक्सेल हेरफेर के लिए कैनवास में एक svg छवि को लोड करने मैं svg

क्रोम/सफारी पर के लिए toDataURL या getImageData की तरह एक विधि की जरूरत है मैं इसे माध्यम से करने का प्रयास कर सकते हैं और छवि और कैनवास

var img = new Image() 
img.onload = function(){ 
    ctx.drawImage(img,0,0) //this correctly draws the svg image to the canvas! however... 
    var dataURL = canvas.toDataURL(); //SECURITY_ERR: DOM Exception 18 
    var data = ctx.getImageData(0,0,img.width, img.height).data //also SECURITY_ERR: DOM Exception 18 
    } 
    img.src = "image.svg" //that is an svg file. (same domain as html file :)) 

कोशिश कर रहा हूँ

लेकिन मुझे सुरक्षा त्रुटियां मिलती हैं I कोई अन्य तरीका?

यहाँ समस्या http://clstff.appspot.com/gist/462846 के एक लाइव डेमो है (यदि आप स्रोत देख सकते हैं)

Answer 1

से: http://www.svgopen.org/2009/papers/12-Using_Canvas_in_SVG/#d4e105

कारण है कि आप drawImage विधि के लिए स्रोत के रूप में एक एसवीजी छवि तत्व उपयोग नहीं कर सकते सरल है, लेकिन दर्दनाक: वर्तमान कैनवास विनिर्देश नहीं है (अभी तक) संदर्भ SVGImageElement को स्रोत छवि के रूप में के रूप में ड्राइमेज के लिए अनुमति देता है और केवलसे सामना कर सकता हैHTMLImageElement, HTMLCanvasElement और HTMLVideoelement। यह उम्मीदवार की प्रक्रिया के दौरान "एचटीएमएल 5 में एसवीजी" परिभाषित करने और को एसवीजीएसवीजेमेंटमेंट को अनुमति देने के लिए बढ़ाया जा सकता है। Xhtml: img लिस्टिंग में तत्व 3 दृश्यता का उपयोग करता है: छुपाएं क्योंकि हम को कैनवास पर इसकी दृश्य प्रतिलिपि में हस्तक्षेप करने के लिए नहीं चाहते हैं।

Answer 2

हाँ, आपको लगता है कि सीधे कैनवास को एसवीजी आकर्षित, और कैनवास से डेटा यूआरएल पाने के लिए कुछ नहीं कर सकते, लेकिन आप उस के लिए canvg उपयोग कर सकते हैं, मेरा मतलब है,। यह बग के बिना नहीं है, खासकर जटिल ग्रेडियेंट प्रसंस्करण के लिए, लेकिन इसके साथ मुझे कुछ सकारात्मक अनुभव था।

Answer 3

var dataUrl = 'data:image/svg+xml,'+encodeURIComponent(svgString); 

Answer 4

पहले डाउनलोड एक js पुस्तकालय svg_todataurl.js और यह

तो बस पेस्ट इस कोड

var SVGtopngDataURL = document.getElementById("svg_element_id").toDataURL("image/png");