使用此处列出的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 文件上传到 vendor API。
如何将上面的 SVG/XML 数据转换为可以保存然后上传的 SVG 文件?
这就是我用于 .png 的内容,但是当我使用乘法器时,大 Canvas 放大会使浏览器崩溃,所以这就是我尝试使用 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) {...
服务器端/Node :
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', {
filename: 'myfile.svg', file: file
}).success(function (data) {...}
在服务器端,不需要解码 base64 编码,因为您只是上传文本,从 ajax 进行 URL 编码就足够了。
关于javascript - 将 SVG 数据转换为可上传的 SVG 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34244618/