Fabric.js：有啥方法可以在 JSON.stringify(canvas) 生成的 Json 中保存 url 而不是 svg 图像的路径？

Posted 2023-03-25

【中文标题】Fabric.js：有啥方法可以在 JSON.stringify(canvas) 生成的 Json 中保存 url 而不是 svg 图像的路径？

【英文标题】：Farbic.js: Is there any way to save url instead of paths of svg image in the Json generated by JSON.stringify(canvas)?Fabric.js：有什么方法可以在 JSON.stringify(canvas) 生成的 Json 中保存 url 而不是 svg 图像的路径？

【发布时间】：2021-01-31 17:32:07

【问题描述】：

我正在尝试将 fabric.js 画布保存到服务器，但我得到了很多 svg 图像。我从 URL (fabric.loadSVGFromURL) 加载它们。当我使用 JSON.stringify(this.canvas) 时，它将 svg 图像的路径保存到 Json 中。如果我保存了它们的所有路径，Json文件会太大，所以我想知道是否有办法只保存这些SVG图像的url src（我还需要能够将它们加载到画布）。

非常感谢！

【问题讨论】：

一般来说可以，但需要注意加载过程。您需要先加载源文件，然后再应用其余的块选项（填充、缩放、宽度、高度）。你有小提琴来支持你吗？

@MariusTurcu 感谢您的帮助，但我决定改用 fabric.Image.fromURL。唯一的问题是，通过这种方式，SVG 必须具有宽度和高度才能在织物画布上显示。我得请美术组提供图片的宽高。

【参考方案1】：

如果您不需要更改 svg 的路径，您可以使用 svg 作为图像。它将像这样工作：

const canvas = new fabric.Canvas("c",  width: 600, height: 600 );

fabric.Image.fromURL("https://svgsilh.com/svg/309620.svg", (img) => 
  img.scaleToWidth(200);
  canvas.add(img);
  console.log(canvas.toJSON());
);

【讨论】：

它似乎可以工作，但是一些 SVG 图像没有宽度和高度属性。如果没有这两个属性，画布无法使用 Image.fromURL 显示它们。除了更改路径代码之外，还有什么方法可以强制图像具有宽度和高度？

我不知道这种方式。在我的项目中，我只是将这些属性添加到所有 svg 图像中。它们等于 viewBox 值。

还有一个问题，不知道大家有没有意识到。如果我们用这种方式显示 SVG 图像，在 Chrome 上只能水平（或仅垂直）拉伸图像，但在 Firefox 上，您无法更改 SVG 图像的纵横比。