phantomjs gettando eccezione DOM 18 su canvas.toDataURL utilizzando immagini src

Question

sto cercando di convertire in formato SVG per immagini PNG utilizzando phantomjs:

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

Ma io sto diventando un Eccezione DOM 18 quando si chiama toDataURL. Ho visto in altre domande simili che questo può accadere se lo svg è ospitato in altri domini ecc ..., ma nel mio caso sto fornendo lo svg src !. Cosa c'è di sbagliato con il codice sopra? Perché sta sparando l'eccezione DOM?

Un codice simile sembra buono in jsfiddle (nessun phantomjs, testato in chrome e FF). E questo esempio fantasma sta anche lavorando con 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')); 
     }); 
    }); 
}); 

Sto cercando di trovare il codice rilevante in fabric.js, ma qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

Ok, rispondere alla mia domanda dopo alcune ricerche ...

Sembra che WebKit è sempre l'impostazione del bandiera origine-pulito per falso ogni volta che una stringa di dati-URI è impostato come attributo di origine di un'immagine HTML, che viene quindi resa sull'elemento Canvas. Firefox e Chrome (ad esempio), lo consentono per alcuni casi, ma non per il webkit.

Fabric.js non soffre di questo problema perché rende le forme in canvas ma non usa i dati uri per questo, quindi la tela non è macchiata.

Un'altra soluzione è utilizzare canvg e SVG.toDataURL.

Riferimenti qui:

Problema spiegato: problemi http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#security_issues

Webkit: Diversi, vedi ad esempio this e this