phantomjs使用SRC图像

我试图SVG转换为使用phantomjs png图片上canvas.toDataURL抛出异常DOM 18：phantomjs使用SRC图像

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时，我得到一个DOM异常18。我在其他类似的问题中看到，如果svg托管在其他域等等，这可能会发生......但在我的情况下，我提供了svg src !.上面的代码有什么问题？为什么它会触发DOM异常？

在jsfiddle（没有phantomjs，在Chrome和FF中测试过）中，类似的代码看起来不错。而这种幻象例子也正在使用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相关的代码，但任何帮助，将不胜感激。

来源

2014-10-17 emepyc

是，忘了提及。 '--web-security = false'在这种情况下没有任何区别。 – emepyc 2014-10-17 12:18:03

好吧，回答一些研究之后，我的问题......

看起来WebKit是始终起源清洁标志每一个数据URI字符串被设置为源属性，时间设定为假一个HTML图像，然后在Canvas元素上呈现。 Firefox和Chrome（例如），在某些情况下允许使用此功能，但不能使用webkit。

Fabric.js不会遇到这个问题，因为它将图形渲染为画布，但不使用数据uri，因此画布没有被污染。

另一种解决方案是使用canvg和SVG.toDataURL。

参考这里：

问题解释说：http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#security_issues

Webkit的问题：有几个，例如见this和this

来源

2014-10-20 14:06:48 emepyc

我尝试了一切，我无法让它工作...我一直在得到该死的错误18.你知道任何可能有帮助吗？ – chris 2016-04-12 14:38:42

phantomjs使用SRC图像

回答

相关问题