phantomjs使用src图像在canvas.toDataURL上抛出DOM异常18

Question

我正在尝试使用phantomjs将svg转换为png图像:

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

类似的代码在jsfiddle中看起来不错(没有pha​​ntomjs,在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中找到相关代码,但任何帮助都会非常感激.

Answer 1

好的,经过一番研究后回答我的问题......

每次将data-uri字符串设置为HTML图像的source属性时,webkit总是将origin-clean标志设置为false,然后在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问题:有几个,例如看到这个和这个