phantomjs canvas.toDataURL पर डोम अपवाद 18 फेंकने src छवियों

Question

मैं phantomjs का उपयोग कर PNG छवियों को svg कन्वर्ट करने के लिए कोशिश कर रहा हूँ का उपयोग कर:

var page = require('webpage').create(); 

page.evaluate(function() { 

    var svg = '<svg class="tnt_tracks_svg" width="800" height="180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/\ 
xlink"><rect width="10" height="10" fill="red"></rect></svg>'; 

    var src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg))); 

    var img = new Image(); 
    img.src = src; 
    img.onload = function() { 
     var canvas = document.createElement('canvas'); 
     canvas.width = img.width; 
     canvas.height = img.height; 
     var context = canvas.getContext('2d'); 
     context.drawImage(img, 0, 0); 
     var src = canvas.toDataURL(); // DOM Exception 18! 
    } 
}); 

लेकिन जब toDataURL बुला मैं एक डोम अपवाद 18 हो रही है। मैंने अन्य समान प्रश्नों में देखा है कि यह तब हो सकता है जब svg अन्य डोमेन आदि में होस्ट किया गया हो ..., लेकिन मेरे मामले में मैं svg src प्रदान कर रहा हूं! उपरोक्त कोड में क्या गलत है? यह डीओएम अपवाद क्यों फायरिंग कर रहा है?

एक समान कोड jsfiddle (क्रोम और एफएफ में परीक्षण नहीं किया गया) में अच्छा दिखता है। और यह प्रेत उदाहरण भी fabric.js का उपयोग कर काम कर रहा है:

page.includeJs("http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js", function() { 
    page.evaluate(function() { 
     var svg_text = '<svg width="600" height="400"><g><rect width="10" height="10" fill="red"></rect></g></svg>'; 

     fabric.loadSVGFromString(svg_text, function (objects, options) { 
      var loadedObject = fabric.util.groupSVGElements(objects, options); 

      var canvas = new fabric.Canvas('canvas'); 
      canvas.add(loadedObject); 
      canvas.calcOffset(); 
      canvas.renderAll(); 
      console.log (canvas.toDataURL('png')); 
     }); 
    }); 
}); 

मैं fabric.js में प्रासंगिक कोड खोजने की कोशिश कर रही है, लेकिन किसी भी मदद की बहुत सराहना की जाएगी।

Answer 1

ठीक है, कुछ शोध के बाद मेरे सवाल का जवाब दे ...

यह वेबकिट हमेशा हर बार एक डेटा-uri स्ट्रिंग के स्रोत विशेषता के रूप में सेट कर दिया जाता झूठी करने के लिए मूल-साफ ध्वज स्थापित कर रही है की तरह लग रहा एक HTML छवि, जिसे कैनवास तत्व पर तब प्रस्तुत किया जाता है। फ़ायरफ़ॉक्स और क्रोम (उदाहरण के लिए), इसे कुछ मामलों के लिए अनुमति दें, लेकिन वेबकिट नहीं।

फैब्रिक.जेएस इस समस्या से पीड़ित नहीं है क्योंकि यह आकार को कैनवास में प्रस्तुत करता है लेकिन इसके लिए डेटा यूरी का उपयोग नहीं करता है, इसलिए कैनवास को दंडित नहीं किया जाता है।

एक और समाधान canvg और SVG.toDataURL का उपयोग करना है। यहाँ

संदर्भ:

मुद्दा समझाया: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#security_issues

वेबकिट मुद्दे: कई, उदाहरण के this और this