如何将画布保存为矢量图像？

Question

如何将画布保存为矢量图像？

ruby-on-railscanvassvgfabricjs

3

我正在使用JavaScript库fabricjs开发设计T恤的应用程序。T恤模板(png)是绝对定位到画布上的。所以，当画布被光栅化为SVG时，画布上的对象将被保存。

我目前在数据库中存储SVG数据以进行显示。当T恤设计过程完成后，需要将其保存为矢量图像，以便在缩放时保持其原始质量。如何完成这个过程？

或者，类似teespring.com这样的系统是如何保存高质量图像的？

- ingnam

你好 - 你对这个主题做了哪些研究？有进行谷歌搜索吗？为什么结果不尽如人意？ - Taryn East

1

你可能在这里混淆了一些东西。SVG是矢量图像，因此通常SVG会被光栅化到画布上，而不是相反。如果你有SVG，你应该已经拥有你正在寻找的矢量图像了。 - Waruyama

@K3N，（不错的链接），但这不是重复的问题。OP正在使用FabricJS库，该库具有非常好的.toSVG方法，可以将所有FabricJS对象转换为它们的SVG等效物。 - markE

@markE 你有没有看那篇文章中的答案吗？ - user1693593

@markE 你删掉之前的评论只是为了写这个吗？ - user1693593

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

FabricJS的canvas.toSVG是一个非常好的功能，它可以将创建画布内容的绘图命令转换为完整的svg元素。

例如，此代码在画布上创建了绿色矩形，然后使用canvas.toSVG将其转换为完整的svg元素。

canvas.add(new fabric.Rect({
  left: 50,
  top: 50,
  height: 20,
  width: 20,
  fill: 'green'
}));
console.log(canvas.toSVG());

这是生成的svg元素的样子：

<?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve"><desc>Created with Fabric.js 0.9.21</desc><rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" /></svg>    </body>

作为SVG元素，它可以被客户端缩放而几乎不会失真。

由于FabricJS为您提供了一个完整的SVG元素，您只需要告诉服务器将该SVG元素包含在向客户端提供的网页的DOM中即可。

就像这样简单（此SVG矩形可以进行缩放而几乎不会失真）。

<!doctype html>
<html>
  <body>
    <!-- This is the exact SVG produced by canvas.toSVG and which was saved in your DB -->
    <?xml version="1.0" standalone="no" ?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="700" xml:space="preserve"><desc>Created with Fabric.js 0.9.21</desc><rect x="-10" y="-10" rx="0" ry="0" width="20" height="20" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: green; opacity: 1;" transform="translate(50 50)" /></svg>    </body>
</html>