繁体   English   中英

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

[英]Convert SVG Data to SVG File that can be uploaded

使用如下所示的canvas.toSVG:使用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(即请求或Unirest)将.svg文件上传到供应商API。

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

这就是我用于.png的方式,但是当我使用乘法器时,大的画布放大会导致浏览器崩溃,所以这就是为什么我尝试使用SVG的原因。 png会自动进行base64编码,因此会在Node中解码,流式传输到temp目录,然后按以下方式发布:

客户端:

 // 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文件,以及如何将其上传?

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

});

$ http.post('/ postVendor',{文件名:'myfile.svg',文件:file})。success(function(data){...}

在服务器端,无需解码base64编码,因为您只是上载文本,而从ajax中输入urlencode就足够了。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM