Question

我正致力于使用fabricjs javascript库设计T恤的应用程序。 T恤模板（png）绝对定位于帆布。因此，当画布光栅化为SVG时，画布上的对象将被保存。

我目前正在将SVG数据存储在数据库中以供显示。当完成T恤设计的过程时，需要将其保存为矢量图像，以便在缩放时保持其原始质量。怎么做到这一点？

或者像this这样的系统如何保存高质量的图像？

Answer 1

FabricJS＆＃39; 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矩形的缩放很少失去清晰度）。

＆＃13;

<!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>

＆＃13;

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

1 个答案: