如何在页面上实现Fabric.js画布的JSON保存/加载（仿示例）

AI 小北

2026-5-20

嘿，很高兴你已经搞定了JSON的核心获取和加载逻辑！接下来咱们把它包装成和Fabric.js示例一样的保存/加载界面，其实很简单，分几步来就行：

1. 先搭好页面UI

首先需要一个文本区域用来展示JSON内容，再加两个按钮分别负责「保存到文本框」和「从文本框加载」，HTML结构可以这样写：

<div>
  <button id="saveBtn">保存JSON到文本框</button>
  <button id="loadBtn">从文本框加载JSON</button>
</div>
<textarea id="jsonTextarea" rows="15" cols="80" placeholder="画布JSON会显示在这里..."></textarea>
<canvas id="canvas" width="800" height="600"></canvas>

2. 实现「保存」功能（把画布JSON显示到文本框）

当用户点击保存按钮时，咱们把画布内容转成格式化后的JSON字符串，再塞进文本框里。Fabric.js的canvas.toJSON()方法已经帮咱们处理了画布数据，只要用JSON.stringify做个格式化就行：

const canvas = new fabric.Canvas('canvas');
const saveBtn = document.getElementById('saveBtn');
const jsonTextarea = document.getElementById('jsonTextarea');

saveBtn.addEventListener('click', () => {
  // 获取画布的JSON对象，转成带缩进的字符串（方便阅读）
  const canvasJSON = JSON.stringify(canvas.toJSON(), null, 2);
  // 把JSON字符串放到文本框里
  jsonTextarea.value = canvasJSON;
});

3. 实现「加载」功能（从文本框读取JSON到画布）

加载的时候反过来，先读取文本框里的内容，解析成JSON对象，再用Fabric.js的loadFromJSON方法加载到画布，最后别忘了刷新画布：

const loadBtn = document.getElementById('loadBtn');

loadBtn.addEventListener('click', () => {
  try {
    // 读取文本框里的JSON字符串并解析
    const jsonData = JSON.parse(jsonTextarea.value);
    // 加载到画布，加载完成后渲染
    canvas.loadFromJSON(jsonData, () => {
      canvas.renderAll();
      alert('画布加载完成！');
    });
  } catch (error) {
    alert('无效的JSON格式，请检查内容！');
    console.error('加载失败：', error);
  }
});

4. 可选优化（贴近示例体验）

如果想更贴近Fabric.js官网示例的效果，还可以加这些小细节：

给文本框添加「清空」按钮，方便重置内容
让文本框支持自动换行（添加wrap="soft"属性）
保存时自动选中文本框内容，方便用户复制
加载前清空画布，避免新旧内容叠加

这样一套下来，就和Fabric.js官网的JSON标签页功能完全一致啦！

内容的提问来源于stack exchange，提问作者anonymoose