如何减小canvas.toJSON()的大小；带有导入的图像

Question

所以我正在使用fabric js创建一个产品配置器，用户可以导入图像并将其添加到画布中，以便保存他们的工作，我使用canvas.toJSON将他们的工作保存在数据库中作为json，但它太大了，特别是如果他们添加多个图像并且尽管这是预期的，但数据库会很滞后，我仍在考虑是否使用 blob 并将文件名保存在数据库中。我应该使用 canvas.loadFromJson 并只使用数据库中的 json。

如果对象包含导入的图像，是否可以更特别地压缩 canvas.toJSON() ？或者像这样的项目很容易吃掉存储空间是很常见的吗？

Answer 1

可以通过

canvas.toDatalessJSON()

方法解决。 该方法可以将一个canvas改为容量比

canvas.toJSON()

小的JSON，也可以通过

canvas.loadFromJSON()

方法加载。

但是，使用此方法时，不会保存除默认属性之外的用户定义属性。为了保存，您必须将属性名称作为数组参数传递给此方法。

使用示例如下：

// 'originWidth', 'originHeight' are user-defined properties.
const properties = ['originWidth', 'originHeight']
const canvasJSON = canvas.toDatalessJSON(properties)

您可以在下面的官方网站上查看更多详细信息。 http://fabricjs.com/docs/fabric.Canvas.html#toDatalessJSON

希望对您有帮助。谢谢你。