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

关键词：

【中文标题】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 图像的纵横比。

是否可以在 fabric.js 中为路径设置动画？

】是否可以在fabric.js中为路径设置动画？【英文标题】：Isitpossibletoanimatethepathinfabric.js?【发布时间】：2017-02-1822:49:29【问题描述】：我们可以通过以下方式在fabric.js中使用路径：letpath=newfabric.Path(\'M00L100100Z\',);canvas.add(path);或者... 查看详情

我的 fabric.js sclaing 方法在对象旋转后不起作用

】我的fabric.jssclaing方法在对象旋转后不起作用【英文标题】：Myfabric.jssclaingmethodsdon\'tworkafterobjectrotation【发布时间】：2021-10-1613:59:50【问题描述】：我的Fabric.js对象有一个缩放方法，因此它们不会缩放到边界之外。但是当我旋... 查看详情

还有另一种方法可以从 Fabric JS 获取 JSON 中存在的 Circle 对象吗？

】还有另一种方法可以从FabricJS获取JSON中存在的Circle对象吗？【英文标题】：IsthereanotherwaytofetchtheCircleobjectpresentinaJSONfromFabricJS?【发布时间】：2020-01-2417:26:50【问题描述】：我正在尝试使用FabricJS从画布中获取JSON，它正在正确获... 查看详情

在 Fabric.js 中分层画布对象

】在Fabric.js中分层画布对象【英文标题】：LayeringcanvasobjectsinFabric.js【发布时间】：2013-02-0813:29:03【问题描述】：有没有办法通过官方API在Fabric.js画布上分层对象？现在我发现这样做的唯一方法是手动遍历canvas._objects并重新排序... 查看详情

（转）第04节：fabric.js用路径画不规则图形

在Canvas上画方形、圆形、三角形都是很容易的，只要调用fabric对应的方法就可以了，但这些都是规则的图形，如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法。所谓路径绘图就是用点和线的移动的方式... 查看详情

如何在fabric js中覆盖canvas.add()方法

】如何在fabricjs中覆盖canvas.add()方法【英文标题】：howtooverridecanvas.add()methodinfabricjs【发布时间】：2020-01-1707:44:42【问题描述】：我正在使用一个图像编辑器，我想在其中将图像添加到带有动画的画布中。我尝试覆盖canvas.add()方... 查看详情

在鼠标移动时获取fabric.js中图像像素的rgb值

】在鼠标移动时获取fabric.js中图像像素的rgb值【英文标题】：getrgbvaluesofpixelofimageinfabric.jsonmousemove【发布时间】：2015-01-0218:43:51【问题描述】：如何在鼠标移动时获取fabric.js中图像的rgb值。我使用了图像对象的getFill()方法，但它... 查看详情

在 Fabric.js 中将对象添加到画布时设置对象的位置

】在Fabric.js中将对象添加到画布时设置对象的位置【英文标题】：SetpositionforobjectwhileaddingittocanvasinFabric.js【发布时间】：2021-04-1002:26:26【问题描述】：我正在使用JavaScript（在React.JS项目中）向我的fabric.js画布添加一个对象，但... 查看详情

Fabric.js - 保存动画快照

】Fabric.js-保存动画快照【英文标题】：Fabric.js-Savingsnapshotsofanimation【发布时间】：2020-04-2302:22:22【问题描述】：我正在使用fabric.js来创建一些动画。现在我想创建一个动画的gif，所以想要一个20fps的“画布捕获”。即每秒20个png... 查看详情

（转）第05节：fabric.js的动画设置

凡是出色的Canvas库都少不了制作动画的方法，Fabric.js也不例外，它有着编写简单且功能强大的动画助手，这就是animate()方法。animate主要使用代码如下：rect.animate(‘angle‘,360,{onChange:canvas.renderAll.bind(canvas)})意思是设置了rect的动画... 查看详情

使用 Fabric.js 选择画布上的所有对象

】使用Fabric.js选择画布上的所有对象【英文标题】：SelectAlltheobjectsoncanvasusingFabric.js【发布时间】：2014-01-0219:05:39【问题描述】：有没有一种方法可以显式选择特定时间实例中存在的所有对象。这可以很容易地使用鼠标选择所有... 查看详情

有啥方法可以判断 UIPickerView 是不是在旋转？

】有啥方法可以判断UIPickerView是不是在旋转？【英文标题】：IsthereanywaytotellifUIPickerViewisspinning?有什么方法可以判断UIPickerView是否在旋转？【发布时间】：2014-09-2702:35:18【问题描述】：有什么方法可以判断UIPickerView是否在旋转？... 查看详情

文本对齐在 fabric.js 中没有按预期工作

】文本对齐在fabric.js中没有按预期工作【英文标题】：Textalignmentnotworkingasexpectedinfabric.js【发布时间】：2015-05-2112:30:45【问题描述】：我的项目需要能够在Canvas上插入文本，用户可以指定文本是左对齐、右对齐还是在指定的边界... 查看详情

有啥方法可以在上传之前获取视频时长吗？

】有啥方法可以在上传之前获取视频时长吗？【英文标题】：Isthereanywaywecangetvideodurationbeforeupload?有什么方法可以在上传之前获取视频时长吗？【发布时间】：2018-05-0123:45:45【问题描述】：我想限制用户只上传时长不超过30秒的... 查看详情

nameof 运算符有啥方法可以访问方法参数（在同一方法之外）？

】nameof运算符有啥方法可以访问方法参数（在同一方法之外）？【英文标题】：Isthereanywayforthenameofoperatortoaccessmethodparameters(outsideofthesamemethod)?nameof运算符有什么方法可以访问方法参数（在同一方法之外）？【发布时间】：2016-09-... 查看详情

有啥方法可以在 Javascript 中删除这些引号？

】有啥方法可以在Javascript中删除这些引号？【英文标题】：IsthereanymethodstoremovethesequotesinJavascript?有什么方法可以在Javascript中删除这些引号？【发布时间】：2021-07-1202:30:08【问题描述】：我有一组这样的数据-[0:latitude:"0",longitude:... 查看详情

有啥方法可以强制异步 NSURLConnection 在后台调用 connectionDidFinishLoading 吗？

】有啥方法可以强制异步NSURLConnection在后台调用connectionDidFinishLoading吗？【英文标题】：IsthereanywaytoforceasyncNSURLConnectiontocallconnectionDidFinishLoadinginthebackground?有什么方法可以强制异步NSURLConnection在后台调用connectionDidFinishLoading吗？... 查看详情

有啥方法可以在取消 UIPopoverController 的同时触摸取消按钮？

】有啥方法可以在取消UIPopoverController的同时触摸取消按钮？【英文标题】：AnywaytoallowatouchonaunbuttonatthesametimeasUIPopoverControllerisdismissed?有什么方法可以在取消UIPopoverController的同时触摸取消按钮？【发布时间】：2013-01-2918:24:39【问... 查看详情