继续创作，减速成长！这是我参加「掘金日新打算 · 6 月更文挑战」的第 14 天，点击查看流动详情
本文简介
点赞 + 关注 + 珍藏 = 学会了
如果你还不太理解 Fabric.js 的序列化和反序列化，能够看看 Fabric.js 序列化 和 Fabric.js 反序列化。
本文要讲的 “精简 JSON” 其实是 精简版序列化 。序列化能够将 Fabric.js 的画布导出成一个 JSON 对象。
咱们要把画布保留到服务器时，传输给后盾的其实是一段 JSON。如果要从新渲染，就把这段 JSON 丢给 Fabric.js，调用对应的办法即可渲染到页面上。
但如果你感觉 Fabric.js 默认导出的 JSON 太大、不须要那么多属性的话，能够应用一个精简版的配置。
入手编码
比照一下默认导出和精简导出。
我在页面上增加了 1 个背景图和 2 个根底图形元素，如果用默认序列化的话，对象是真的有点多。
如果你只须要外围的属性，只需用于渲染，那能够应用“精简序列化”。
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
<!-- 引入 Fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
// 初始化画布
canvas = new fabric.Canvas('canvasBox', {includeDefaultValues: false // 批示 toObject/toDatalessObject 是否应该蕴含默认值，如果设置为 false，则优先于对象值})
console.log(canvas.toObject()) // 输入序列化的内容
</script>《canvas.includeDefaultValues 文档》
将 includeDefaultValues 设置为 false 就能让 canvas.toObject() 办法输入一个精简后的 JSON。
includeDefaultValues 的值默认为 true，所以默认会输入根底版的 JSON 内容。
你能够通过批改 includeDefaultValues 的值，察看输入对象的变动。
须要揭示一下： 如果你的我的项目需要是只须要看到成果，不须要管太多外部属性的话，能够尝试用本文提到的内容，精简数据再传给后端，这样做能够节俭空间。
认真的同学应该也看失去，就算精简后的 JSON 数据，外面还是会保留版本号的。如果版本号对你来说没什么作用，你也能够用 JS 的办法把 version 去掉。但我不倡议你这么做。
源码仓库
⭐Fabric.js 精简序列化
举荐浏览
👍《Fabric.js 笔刷到底怎么用？》
👍《Fabric.js 圆形笔刷》
👍《Fabric.js 橡皮擦的用法（蕴含复原性能）》
👍《Fabric.js 从入门到旁若无人》
点赞 + 关注 + 珍藏 = 学会了