将 SVG 数据转换为可上传的 SVG 文件答案

【问题标题】：Convert SVG Data to SVG File that can be uploaded将 SVG 数据转换为可上传的 SVG 文件
【发布时间】：2016-03-18 14:39:20
【问题描述】：

使用此处列出的 canvas.toSVG：Creating a backing canvas with FabricJS 我可以通过调用 canvas.toSVG() 将我的 HTML5 Canvas 转换为如下所示的 SVG 数据：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="85.999967in" height="55.812440in" style="background-color: #ffffff" viewBox="0 0 650 421.84" xml:space="preserve">
<desc>Created with Fabric.js 1.6.0-rc.1</desc>
<defs></defs>
<g transform="translate(516.24 217.93) scale(0.47 0.47)">
<image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAAD/2wBDAAEBAQEBAQEBAQEBAQEB…lq4JVWvJFVClTiCkAAgF9IIBHyAQACB/oAf6+gMzMMVWDEN7kh5AkN0dEwR3++iCe/+ez9f//Z" x="-200" y="-193.5" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="400" height="387" preserveAspectRatio="none"></image>
</g>
</svg>

但是，我需要能够通过 AJX 或 Node（即 Request 或 Unirest）将 .svg 文件上传到供应商 API。

如何将上面的 SVG/XML 数据转换成可以保存然后上传的 SVG 文件？

这是我用于 .png 的，但是当我使用乘数时，大画布放大会使浏览器崩溃，所以这就是我尝试使用 SVG 的原因。 png 是自动 base64 编码的，所以在 Node 中解码，流式传输到临时目录，然后发布如下：

客户端：

 // Multiply Canvas
        var img = canvas.toDataURL({
            // Multiplier appears to accept decimals
            format: 'png',
            multiplier: 5        
});

 $http.post('/postVendor', { filename: filename, file: img }).success(function (data) {...

服务器端/节点：

app.post('/postVendor', function (req, res, next) {

    var filename = req.body.filename;
    var file = req.body.file;
    var fileloc = 'upload/' + filename;

    //var base64Data;
    fileBuffer = decodeBase64Image(file);

    fs.writeFileSync('upload/' + filename, fileBuffer.data);

 unirest.post('http://myvendorsAPI/ws/fileuploads')
.headers({ 'Content-Type': 'multipart/form-data' })
.field('filename', filename)// Form field
.attach('file', fileloc)// Attachment
.end(function (response) {
        console.log(response.body);
        //fs.unlinkSync(fileloc);
        res.send(response.body);
    });
})

由于 toSVG 输出的是 XML，我如何将其制作成 SVG 文件，以及如何上传？

【问题讨论】：

那个 XML 是一个 SVG 文件。 SVG 是一种基于 XML 的文件格式。
但是你将画布变成这个 svg 将一无所获：它只是一个 JPEG 版本的画布，被包裹在一个 svg 图像元素中。如果你想重新缩放它，你将没有比 png 版本更多的好处。
我能够将它作为 XML 推送。据我所知，用 .svg 的扩展名命名文件是可行的。它似乎可以很好地扩展，但我看到数据标签是 jpeg。应该/可以改变吗？
我在fabricjs画布上绘制的是像素图像，没有办法。
像素保持像素。但想象有一张 5mpx 的图片，将其绘制在 200x300 的画布上。如果您使用 dataUrl 导出它，您将拥有一张 200x300 的图片。如果您使用 toSVG 导出，您将在所需大小的表面上绘制 5mpx。您绘制的任何其他内容（文本、渐变、矢量装饰、框架）都将保持矢量。手绘也是基于形状的。

标签： javascript node.js svg fabricjs

【解决方案1】：

    var file = canvas.toSVG({
        // Multiplier appears to accept decimals
        width: '200mm',
        height: '300mm'

});

$http.post('/postVendor', { filename: 'myfile.svg', file: file }).success(function (data) {...}

在服务器端不需要解码 base64 编码，因为你只是上传文本和 ajax 的 urlencode 就足够了。

【讨论】：

做到了。看起来很棒！