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

【问题标题】：phantomjs throwing DOM exception 18 on canvas.toDataURL using src imagesphantomjs 使用 src 图像在 canvas.toDataURL 上抛出 DOM 异常 18
【发布时间】：2014-12-13 00:31:49
【问题描述】：

我正在尝试使用 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 异常 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 中找到相关代码，但我们将不胜感激。

【问题讨论】：

是的，忘记说了。 --web-security=false 在这种情况下没有任何区别。

标签： javascript canvas svg phantomjs fabricjs

【解决方案1】：

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

看起来 webkit 总是在每次将 data-uri 字符串设置为 HTML 图像的源属性时将 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 问题：多个，例如参见 this 和 this

【讨论】：

我尝试了所有方法，但无法正常工作...我不断收到该死的错误 18。你知道还有什么可能有帮助的吗？