FabricJS画布JSON文件的保存与加载功能实现方案问询

嘿，我来帮你搞定FabricJS的本地JSON保存和加载功能！基于你已经有的基础代码，这俩功能实现起来挺直接的，我给你拆解具体步骤和可直接复用的代码：

一、添加「保存JSON到本地」功能 #

核心思路是把画布的JSON数据转成Blob文件，再通过隐藏的a标签触发浏览器下载。你可以按以下步骤来：

1. 先在HTML里加一个保存按钮：

<button id="saveBtn">保存画布JSON到本地</button>

2. 在你的jQuery初始化代码里，给这个按钮绑定点击事件：

$(function() {
  var canvas = new fabric.Canvas('c', { 
    // 你已有的画布配置...
  });

  // 保存JSON到本地的逻辑
  $('#saveBtn').click(function() {
    // 获取画布完整JSON数据，格式化后更易读
    var canvasJSON = JSON.stringify(canvas.toJSON(), null, 2);
    // 将JSON字符串转成Blob对象
    var blob = new Blob([canvasJSON], { type: 'application/json' });
    // 创建临时下载链接
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    // 设置自定义下载文件名，带时间戳避免重名
    a.download = 'fabric-canvas-' + new Date().getTime() + '.json';
    // 触发下载动作
    document.body.appendChild(a);
    a.click();
    // 清理临时资源
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  });

  // 你已有的添加图片、文本的逻辑...
});

二、添加「从本地加载JSON」功能 #

这个功能需要用文件选择框让用户上传JSON文件，然后读取文件内容并加载到画布：

1. 在HTML里加一个文件选择控件（可以配合按钮美化，这里先写基础版）：

<input type="file" id="loadFileInput" accept=".json" style="display: inline-block;" />
<button id="loadBtn">加载本地JSON到画布</button>

2. 在JS里绑定加载逻辑：

// 点击加载按钮触发文件选择
$('#loadBtn').click(function() {
  $('#loadFileInput').click();
});

// 监听文件选择变化
$('#loadFileInput').change(function(e) {
  var file = e.target.files[0];
  // 基础格式校验
  if (!file || file.type !== 'application/json') {
    alert('请选择正确的JSON格式文件！');
    return;
  }
  // 读取文件内容
  var reader = new FileReader();
  reader.onload = function(event) {
    try {
      var jsonData = JSON.parse(event.target.result);
      // 加载到画布，FabricJS 1.7.22需要回调确保图片等异步资源加载完成
      canvas.loadFromJSON(jsonData, function() {
        canvas.renderAll();
        alert('画布加载完成！');
      });
    } catch (err) {
      alert('JSON文件格式错误：' + err.message);
    }
  };
  reader.readAsText(file);
  // 重置文件选择框，方便重复选择同一文件
  this.value = '';
});

一些实用提示 #

• 图片资源兼容性：如果画布包含外部图片，保存的JSON只会存图片URL，加载时需确保URL可访问；如果是本地上传的图片，FabricJS 1.7.22默认会转成base64存入JSON，这种情况加载无压力。
• JSON自定义：canvas.toJSON()默认包含所有元素属性，若需精简可传参数指定保留字段，比如canvas.toJSON(['id', 'left', 'top', 'fill'])。
• 体验优化：你可以把文件选择框隐藏，用按钮触发，或者添加加载进度提示，提升用户体验。

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