Phantomjs lance l'exception DOM 18 sur canvas.toDataURL en utilisant des images src

J'essaie de convertir svg en images png en utilisant 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! } }); 

Mais je reçois une exception DOM 18 en appelant à DataURL. J'ai vu dans d'autres questions similaires que cela pourrait se produire si le svg est hébergé dans d'autres domaines, etc. … mais dans mon cas, je fournis le svg src !. Qu'est-ce qui ne va pas avec le code ci-dessus? Pourquoi déclenche-t-il l'exception DOM?

Un code similaire semble bon dans jsfiddle (sans phantomjs, testé en chrome et FF). Et cet exemple fantôme fonctionne également en utilisant 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')); }); }); }); 

J'essaie de trouver le code pertinent dans fabric.js, mais toute aide serait très appréciée.

• Comment faire pivoter autour d'un point spécifié dans fabric.js?
• Javascript: le dessin de rectangle sur toile ne fonctionne pas sur IE
• La performance de la toile baisse après quelques secondes
• Faire un rectangle de toile javascript clickable
• Limite de taille de téléchargement canvas.toDataURL ()

• Comment réduire l'utilisation de la mémoire de getImageData lors de l'utilisation de la toile pour éditer une vidéo?
• Comment synchroniser deux éléments de toile sur des pages distinctes?
• Effet de texte de pont dans le canevas HTML5
• Distorsion de toile HTML5
• DOM Security Exception 18: Tainted Canvas