Prev: how to create 5-dimensional array ? [Train-spotting]
Next: Crazy idea?
From: DL on 2 May 2010 09:14
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.


From: nick on 2 May 2010 15:38
On May 2, 9:14 am, DL <tatata9...(a)gmail.com> wrote:
> 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.
From: DL on 2 May 2010 18:03
On May 2, 3:38 pm, nick <nick...(a)fastmail.fm> wrote:
> On May 2, 9:14 am, DL <tatata9...(a)gmail.com> wrote:
>
>
>
> > 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

From: nick on 2 May 2010 20:00
On May 2, 6:03 pm, DL <tatata9...(a)gmail.com> wrote:
> 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.
From: DL on 2 May 2010 21:16
On May 2, 8:00 pm, nick <nick...(a)fastmail.fm> wrote:
> On May 2, 6:03 pm, DL <tatata9...(a)gmail.com> wrote:
>
> > 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.

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...
 |  Next  |  Last
Pages: 1 2
Prev: how to create 5-dimensional array ? [Train-spotting]
Next: Crazy idea?