How to save/export a DOM element to an image?

Question

Hi,

I have a web page which has a form element (with its ID known) and inside the form there are multiple DIVs, and the position of each div may be changed.

What I'd like to do is:

a) Save the current state of this form

// var currentForm=document.forms['myFrm'].innerHTML;

would probably suffice...

b) Save or export the entire form with the most current position of each DIV to an image file.

// how to save/export the javascript var of currentForm to an image file is the key question.

Any help/pointer would be appreciated.

Answer 1

Do you want to do it completely in JavaScript? If so, one possible solution could be to transform the HTML to an SVG. Or maybe you can use the <canvas> tag and draw it manually.

Answer 2

I hope I'm understanding you, it sounds like what you want is serialization of the values of the <form>:

In computer science, in the context of data storage and transmission, serialization is the process of converting a data structure or object into a sequence of bits so that it can be stored in a file, a memory buffer, or transmitted across a network connection link to be "resurrected" later in the same or another computer environment.

JavaScript Form Serialization Comparison compares several methods using JavaScript and JavaScript libraries to serialize a form into a form that can be saved.

Answer 3

@aeby, "transform the HTML to an SVG", very interseting idea, pls elaborate.

@scunliffe, Let me explain.

Web Page State

1) A web page loads, say, it has two DIVs in it, div A has a description and div B has a title. To express it a bit visually, it's like this: div B div A

And the user is able to move div B above div A

2) Now the web page looks like this: div A div B

Desired Outcome

a) keep the most current layout, that is, div A div B ... b) capture it an image (on the fly) and save it.

Thank you.

@artlung, I do not exactly follow you on js serialization, could you elaborate? Thanks.