phantomjs使用src图像在canvas.toDataURL上抛出DOM异常18 [英] phantomjs throwing DOM exception 18 on canvas.toDataURL using src images

问题描述

我尝试使用 phantomjs 将svg转换为png图片：

I'm trying to convert svg to png images using 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!
    }
});

但是我调用toDataURL时得到了一个DOM异常18。我已经看到在其他类似的问题，这可能发生如果svg托管在其他域等等，但在我的情况下，我提供的svg src！上面的代码有什么问题？为什么会触发DOM异常？

But I'm getting a DOM Exception 18 when calling toDataURL. I have seen in other similar questions that this may happen if the svg is hosted in other domains etc..., but in my case I'm providing the svg src!. What is wrong with the code above? Why is it firing the DOM Exception?

类似的代码在中看起来不错jsfiddle （没有pha​​ntomjs，在chrome和FF测试）。此幻像示例还使用 fabric.js 进行工作：

A similar code looks good in jsfiddle (no phantomjs, tested in chrome and FF). And this phantom example is also working using 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中找到相关代码，但任何帮助将非常感谢。

I'm trying to find the relevant code in fabric.js, but any help would be much appreciated.

推荐答案

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

Ok, answering my question after some research...

每当将data-uri字符串设置为HTML图片的来源属性时，webkit总是将 origin-clean 标记设置为 false ，然后在帆布元素。 Firefox和Chrome（例如）允许这种情况，但不是webkit。

It looks like webkit is always setting the origin-clean flag to false every time a data-uri string is set as source attribute of a HTML image, which is then rendered on Canvas element. Firefox and Chrome (for example), allow this for some cases, but not webkit.

Fabric.js不会遇到这个问题，因为它将形状呈现到画布

Fabric.js doesn't suffer from this problem because it renders the shapes into canvas but don't use the data uri for that, so the canvas is not tainted.

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

Another solution is to use canvg and SVG.toDataURL.

此处参考：

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

Webkit问题：有几个，请参阅< a href =https://bugs.webkit.org/show_bug.cgi?id=108755#c2>这和此

Webkit issues: Several, see for example this and this

这篇关于phantomjs使用src图像在canvas.toDataURL上抛出DOM异常18的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！