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

[DL]

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 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 pointer would be appreciated.

 

[nick]

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 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 pointer would be appreciated.

How simple are the visual elements within the form that you want to
save as a picture?

Are they just simple colored lines and rectangles, or are there other
images or misc. html rendered in the form?

I can think of a few ways to do it depending on how complex the saved
image needs to be, who the target user is, whether server-side help is
an option, whether a browser extension or privileged execution
environment is an option, etc.

 

[DL]

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 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 pointer would be appreciated.

How simple are the visual elements within the form that you want to
save as a picture?

Are they just simple colored lines and rectangles, or are there other
images or misc. html rendered in the form?

I can think of a few ways to do it depending on how complex the saved
image needs to be, who the target user is, whether server-side help is
an option, whether a browser extension or privileged execution
environment is an option, etc.

Excellent questions, Nick.

The visual elements within the form are all image files and since some
of these images would be allowed to overlap, that is, lay one upon the
other but not completely stacking, so, the option of the simple saving
of the most current order of the DIVs would not suffice. " misc. html
rendered in the form?", at this point, no.

"on how complex the saved image needs to be", prefer one simple image,
and preferably in PNG format to reduce its size. "target user" would
be like middle/high school students and even college students. Yes,
I'm open to "server-side help", "a browser extension", preferably not,
several of them out there, support them once and continuous may be
resource intensive...
"privileged execution environment is an option", unfortunately not,
this would be a public utility, we don't have control over
environment.

Many thanks.

Don

 

[nick]

The visual elements within the form are all image files and since some
of these images would be allowed to overlap, that is, lay one upon the
other but not completely stacking, so, the option of the simple saving
of the most current order of the DIVs would not suffice.

Ok, that's sort of what I was picturing. Something like the user
creates a scene by dragging some images around?

I think these are your best two options:

1 - I'm assuming server has access to the images (they will be
uploaded or are on the web already). Store the x/y coords and z-index
of each image in hidden form fields. Submit the form. Server
constructs a merged image using a library like gd or imagemagick.

2 - Use HTML5 canvas, insert images with drawImage, compose with
toDataURL. New browsers only; IE might support this with the help of
excanvas.

 

[DL]

Ok, that's sort of what I was picturing. Something like the user
creates a scene by dragging some images around?

I think these are your best two options:

1 - I'm assuming server has access to the images (they will be
uploaded or are on the web already). Store the x/y coords and z-index
of each image in hidden form fields. Submit the form. Server
constructs a merged image using a library like gd or imagemagick.

2 - Use HTML5 canvas, insert images with drawImage, compose with
toDataURL. New browsers only; IE might support this with the help of
excanvas.

Yes, thought of option 1. Here's the thing. One image may be layered
upon another, that is, one image is half covered/hidden by another,
hence, the simple ordering of each image would not be good enough,
right? Now, if we have a way to activate the "Ctrl + Alt + Prnt Srcn"
key combo and save/capture its result, it would be really much closer
to the problem resolution.

Option 2, might take more coding aside from IE issue...

Thanks. Keep it coming...

 

[nick]

Yes, thought of option 1.  Here's the thing.  One image may be layered
upon another, that is, one image is half covered/hidden by another,
hence, the simple ordering of each image would not be good enough,
right?  

So if the images may be overlapping you should present the user with a
way to send them up or down the Z stack, or do it programatically so
you get the results you want, right?

Now, if we have a way to activate the "Ctrl + Alt + Prnt Srcn"
key combo and save/capture its result, it would be really much closer
to the problem resolution.

You lost me there. What's the "problem resolution?"

Assuming the images are going to be placed at different positions (x,
y) and have z-index info, and there's no scaling or cropping or other
stuff going on, all the info you should need to send to the server,
for each image in your collection, is a path to the image and its
x,y,and z coordinates. Imagemagick (et al) should be able to compose
something pretty much identical to what you see in your browser (and
what you'd see in a screenshot of your browser, of course) with that
information.