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

【问题标题】：How to save canvas as vector image?如何将画布保存为矢量图像？
【发布时间】：2015-08-31 18:58:00
【问题描述】：

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

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

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

【问题讨论】：

嗨 - 你对这个话题做了哪些研究？你谷歌搜索了吗？为什么结果不理想？
可能重复：stackoverflow.com/questions/10273516/…
你可能在这里混淆了一些东西。 SVG 是矢量图，因此通常 SVG 会被光栅化到画布上，而不是相反。如果你有 SVG，你应该已经有了你正在寻找的矢量图像。
@K3N，（很好的链接）但这不是一个重复的问题。 OP 正在使用 FabricJS 库，它有一个非常好的 .toSVG 方法，可以将所有 FabricJS 对象转换为它们的 SVG 等价物。
@markE 您是否费心查看该帖子中的 answer？

标签： ruby-on-rails canvas svg fabricjs

【解决方案1】：

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>

【讨论】：

我使用canvas.toSVG方法生成了svg数据并保存为.svg格式。当我在 illustrator 上打开这个文件时，它只显示文本对象而不显示图像。我打开 svg 文件，发现 image xlink:href 设置为 AWS 上的图像链接。我想要的是制作一个功能，用于通过客户端下载 svg 图像并将其调整为所需的大小。
在没有看到你的代码的情况下，我只能建议你创建一个以 AWS 图像为源的图像对象，并引用该本地图像，而不是直接引用 AWS 图像。
Here 我的 svg 图片是什么样的。现在我想做的是使用 imagemagick 将 svg 转换为 png 并将其调整大小。或者有什么好的技术吗？我想要的是这个高分辨率的 svg 的 png 图像 ~ 2000x2377