使用 FileReader 将 JSON blob 导入到 canvas

Question

我正在尝试允许 fabricjs 从我导出的 .JSON 文件中导入一个 JSON blob 字符串，该文件允许将字符串加载到 canvas 中并放置。这是为了当用户可能希望通过将 JSON blob 以 .JSON 格式导出到他们的下载并将他们的 canvas 作品导出到另一台计算机并导入到另一台计算机以便稍后继续.

我已经能够弄清楚如何使用这里的代码导出 JSON blob：

function exportFile(textData, filename) {
  var filesaver = require('filesaver.js');
  var content = new Blob([textData], {type: "application/json"});
  filesaver.saveAs(content, filename);
}

这允许我使用 filesaver 编写包含所有对象的 JSON blob 文件，但我不确定如何将 JSON blob 文件导入回来。

这是我使用 FileReader 实现它并将 JSON blob 数据导入回 canvas 的糟糕尝试，以大致展示我是如何尝试使其工作的。这可能是一个非常简单的修复，但我真的很困惑。

$("#import-file-button").on("change", function(e) {
  page.closePanel(null, true);

  // under maintainance 
  var files = e.target.files;
  var reader = new FileReader();

  reader.onload = function(e) {
      var contents = reader.result;
  };

  var readData = reader.readAsText(blob);
  canvas.clear();

  canvas.loadFromJSON(readData, function() {
    canvas.renderAll();
  });
  utils.centerContent();

reader.readAsArrayBuffer(files[0]);
});

Answer 1

$("#import-file-button").on("change", function(e) {
  page.closePanel(null, true);

  // under maintainance 
  var files = e.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
      var contents = reader.result;
      canvas.loadFromJSON(JSON.parse(contents), function() {
        canvas.renderAll();
      });
      utils.centerContent();
  };

  reader.readAsText(files);
});

您需要使用 readAsText 读取 blob，并在 onload 回调中将该结果添加到 canvas。确保 reader.result 是 JSON.

使用 FileReader 将 JSON blob 导入到 canvas

Import JSON blob to canvas using FileReader

filereader

fabricjs