Tech to use to annotate markup on Jpeg online

[Vis1/0N]

I need to draw a few widgets on a jpeg, basically one or more of an oval, an arrow and a textbox. I cannot flatten and save the canvas as an image, I may need to edit these items on subsequent loading of the page, therefore I need to save the widget data.

I haven't used any HTML5 so far. What tech/toolkits should I look out to implement these? Constrained to support IE10+. The canvas looks easy to work with, but the examples are with inline javascript code. I need to read the database for the objects and process the objects.

 

[Thor]

I need to draw a few widgets on a jpeg, basically one or more of an oval, an arrow and a textbox. I cannot flatten and save the canvas as an image, I may need to edit these items on subsequent loading of the page, therefore I need to save the widget data.

I haven't used any HTML5 so far. What tech/toolkits should I look out to implement these? Constrained to support IE10+. The canvas looks easy to work with, but the examples are with inline javascript code. I need to read the database for the objects and process the objects.

Are you looking at something like this?

http://phpchart.com/

http://pchart.sourceforge.net/

 

[[)roi(]]

Fabricjs should be easy to use for annotations. As for storing/restoring the metadata, three possibilities come to mind:

• HTML 5 custom data tags: server adds the data attribute tags & a bit of client side javascript could render them with Fabricjs; reverse involves iterating through Fabricjs objects and posting back to the server.
• Use Fabricjs serialization / deserialization to JSON.
• Seamlessly by using asynchronous callbacks; basically always keep the server updated when annotation changes occur.

 

[Vis1/0N]

Fabricjs should be easy to use for annotations.

Thanks, I have been racking my brain trying to find that site.