PhantomJS werfen DOM Ausnahme 18 auf canvas.toDataURL mit src Bildern

Question

Ich versuche, svg zu PNG-Bildern zu konvertieren phantomjs mit:

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! 
    } 
}); 

Aber ich bin eine DOM-Exception 18 bekommen, wenn toDataURL Aufruf. Ich habe in anderen ähnlichen Fragen gesehen, dass dies passieren kann, wenn die Svg in anderen Domänen gehostet wird usw., aber in meinem Fall stelle ich die Svg src! Was ist falsch an dem obigen Code? Warum feuert es die DOM Exception?

Ein ähnlicher Code sieht gut in jsfiddle (keine Phantomjs, in Chrom und FF getestet). Und dieses Phantom Beispiel arbeitet auch mit 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')); 
     }); 
    }); 
}); 

Ich versuche, den entsprechenden Code in fabric.js zu finden, aber jede Hilfe wäre sehr geschätzt.

Answer 1

Ok Beantwortung meiner Frage nach einigen Recherchen ...

Es webkit sieht aus wie immer ist die Ursprung-clean Flagge falsche jedes Mal, wenn ein Daten-uri String Einstellung als Quelle Attribut gesetzt von ein HTML-Bild, das dann auf dem Canvas-Element wiedergegeben wird. Firefox und Chrome (zum Beispiel), erlauben dies in einigen Fällen, aber nicht Webkit.

Fabric.js leidet nicht an diesem Problem, da es die Formen in Canvas rendert, aber nicht das Daten-URI dafür verwendet, so dass das Canvas nicht beschädigt ist. Eine andere Lösung ist es, canvg und SVG.toDataURL zu verwenden. hier

Referenzen:

Ausgabe erklärt: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#security_issues

Webkit Probleme: Mehrere, siehe zum Beispiel this und this