2

可能这已经被提过很多次了。但我需要得到最终的答案。

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

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

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

一切都很好，直到我找到toDataURL()方法（或getImageData()方法）。它仅适用于 Firefox。其他浏览器正在抛出安全漏洞异常。这显然是不可接受的。

我已经失去了完成这项工作的希望，因为将图像绘制到画布上会污染它。有没有办法在不改变网页整体结构的情况下解决这个问题？

4

3 回答 3

0

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

否则，如果 SVG 对象与您的脚本来自同一个域，则不应出现安全错误。您可以将对象镜像到与您的网页相同的服务器上吗？

于 2013-10-16T13:16:17.587 回答
0

我在印刷行业工作，如果您可以将 SVG 保存为矢量，员工会很高兴。这是一个可以将 SVG 转换为 PDF 的库：http: //d3export.cancan.cshl.edu/。

于 2013-10-16T13:16:51.247 回答
0

我通过使用织物 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() 问题，但现在出现了新事物，祝我好运。

于 2013-10-24T13:19:30.620 回答