Question

这可能已多次提出。但我需要得到最终答案。

我使用对象html标记将SVG文件加载到浏览器上。使用javascript和DOM，用户可以更改该文件并自定义其颜色元素等等。基本上它是夹克的定制者。我没有使用画布。这是从插画家导出并改变的纯svg。

一切顺利，直到我必须将此svg的更改版本导出到服务器以创建包含此自定义图像的pdf文档。显然我需要向包含该图像的base64字符串的服务器发送ajax请求。

我问的任何人都会说我应该通过javascript创建一个图像，将src属性分配给SVG的序列化XML，然后将其绘制到画布上以提取base64字符串。

一切顺利，直到我点击toDataURL()方法（或getImageData()方法）。它只适用于Firefox。其他浏览器正在抛出安全漏洞例外。这显然是不可接受的。

我已经失去了完成这项工作的希望，因为将图像绘制到画布上就是污点。有没有办法解决这个问题而不改变网页的整个结构？

Answer 1

SVG是文字。这可能是“改变结构”，但您可以将SVG树的差异发送到服务器而不需要整个base64 rigmarole。

否则，如果SVG对象来自与脚本相同的域，则不应存在安全性错误。你可以在与网页相同的服务器上镜像对象吗？

Answer 2

＆＃39>在印刷行业工作，如果你能将SVG放在矢量中，员工会很高兴。这是一个可以将SVG转换为PDF的库：http://d3export.cancan.cshl.edu/。

Answer 3

我使用fabric js解决了.toDataURL（）问题。

var a = document.getElementById("theSVG"); //This is the <object>
a.setAttribute('data', 'worldmap.svg'); //Setting the data attribute to the svg file


a.onload = function () {

    var svgDoc = a.contentDocument;
    var s = new XMLSerializer();
    var xml = s.serializeToString(svgDoc);
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    var canvas = new fabric.Canvas('canvas');

    var svg = xml;

    fabric.loadSVGFromString(svg, function (objects, options) {
        var loadedObject = fabric.util.groupSVGElements(objects, options);
        canvas.add(loadedObject);
        canvas.calcOffset();
        canvas.renderAll();
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('This browser doesn\'t provide means to serialize canvas to an image');
        }
        else {
            window.open(canvas.toDataURL('png'));
        }

    });
}

这让我了解了.toDataURL（）问题，但现在出现了新的事情，祝我好运。

Canvas.toDataURL（）问题。还有其他选择吗？

3 个答案: