LoadFromJson 不是 working/Ignoring 使用结构文本上传后的对象属性

Question

这些是我在 canvas 的上传和下载过程中遵循的步骤。该项目在 angular.

中进行

我使用以下方法将 canvas 保存到 DB/text 文件：JSON.stringify（与序列化配合良好）
我从该文本文件加载 canvas 进行编辑：loadFromJSON（正确上传）
对上传的 canvas 进行一些更改并再次上传 文本，Itext 扩展类被截断。

支持代码如下。

/// 
/// SAVING TO TEXT FILE FORMAT
///
async onSave(layoutName:any) {
    this.layoutName =layoutName;      
    console.log(JSON.stringify(this.canvasJson));  
    if(this.canvasJson) {
      let blob = new Blob([JSON.stringify(this.canvasJson)], { type: 'text/plain' });
      FileSaver.saveAs(blob, this.layoutName + '.text'); 
      this.layoutName = null; 
    }   
    this.fabricService.addGrid(this.fabricService.canvas);
    this.addNameModel.hide();
  }

///
/// TEXT FILE TO CANVAS
///
async onChange(event:any): Promise<void> {
  const files = event.target.files;
  let file = files[0];  
  if(file) {
    const data = await new Response(file).text(); // .json()   
    console.log(data);
    this.fabricService.addGrid(this.fabricService.canvas); 
    this.fabricService.canvas.loadFromJSON(data, 
                                            this.fabricService.canvas.renderAll.bind(this.fabricService.canvas));     
    this.fabricService.updateModifications(true);
  }  
  console.log(this.fabricService.canvas);
  this.reset();
  this.uploadPromptModal.hide();
   
  }

我错过了什么？

注意：我认为 JSON.stringify(this.canvasJson) 期间可能存在问题，它会截断扩展的类.

Answer 1

您应该使用以下代码将 canvas 转换为 JSON：

this.fabricService.canvas.toJSON(["extended_property_1", "extended_property_2" ...])

canvas.toJSON 是 fabric JS 的内置函数，它允许我们使用扩展属性（我们的自定义属性）将 canvas 序列化为 JSON。

More info about canvas.toJSON( )

LoadFromJson 不是 working/Ignoring 使用结构文本上传后的对象属性

LoadFromJson not working/Ignoring the Object Properties after Uploading with fabric text

javascript

fabricjs

angular