Question

我正在尝试允许fabricjs从我导出的.JSON文件中导入JSON blob字符串，该文件允许将字符串加载到画布中并放置。这适用于用户可能希望将其画布工作导出到另一台计算机，方法是将JSON blob导出为.JSON格式的下载，然后导入另一台计算机以便以后继续使用。

我已经能够弄清楚如何使用此代码导出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数据导回到画布中的不良尝试，以显示我试图使其工作的方式。这可能是一个非常简单的修复，但我对此非常困惑。

$("#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回调中将该结果添加到画布。确保reader.result是JSON。

使用FileReader将JSON blob导入画布

1 个答案: