feat: Canvas data serialization

[junghwan-park]

• Save ImageEditor's state to JSON format
  • object
    • backgroundImage
    • drawings
    • texts
    • shapes
    • icons
  • filter
  • undo/redo stack

issue-ref: #244

[jaltekruse]

Hi @junghwan-park,

My next big use case for fabric and the tui-editor requires a feature like this. I am curious if you have stared work on this feature at all? I am happy to work together with you on this and contribute to the project.

For a little context on my use case and for an example of my work, I am currently using your component for my open source math site, it allows teachers to give feedback on images of student work.

https://freemathapp.org/

The next feature I would like to add is a drawing/graphing component built on fabric and the tui-editor to allow students to submit math drawings they create digitally in the site, rather than relying on images attached from elsewhere or captured from their webcam. For this feature though I want the documents to be further editable, so I don't want to ship the feature where it would just flatten the student work down to a jpeg or PNG.

[jaltekruse]

@junghwan-park I have been working on this, and it appears that using the native fabric JS JSON serialization works for most of the types of shapes/objects in the editor. There is an issue reading back in objects that override the "type" property of a fabric object. So the use of a special 'circle' type instead of just leaving it as an ellipse did cause an issue, but removing that customization allowed most things to work.

Would you consider removing this customization and just letting it stay as an ellipse?

Is there important state in the image editor that isn't covered by a toJSON on the fabric canvas?

[no-1ne]

For replay it is doable by taking .tojson snapshots along with respective timestamps, and then replaying them (based on timestamp, by loading respective loadFromJSON )

[no-1ne]

Currently is there an API on how do we get the fabric instance so that we can get the tojson data?

[lja1018]

@jaltekruse
Excuse me for not having answered your letter sooner. You can take advantage of fabric canvas' toJson, but you should also consider serializing data on the undo/redo stack.

@startupgurukul
Currently, APIs to get fabric instance are not supported.

[no-1ne]

Thank you for the reply, if the fabric instance isn't exposed, how do you recommend getting the current json snapshot

[BennyG93]

Hi, is there any update on this feature? It would be great for coming back to a design at a later date to continue editing (similar to canva)

Thanks!

[Hardik-2019]

I would love to work on this issue. Please let me know how can I contribute. Can you please assign this issue to me @junghwan-park

[lja1018]

@Hardik-2019
I think it can be implemented through #667.