Save DIV content as image

Question

hi

i have a div that shows some content (several images, text, floating elements, etc) and i would like to add the posibility to user do something like "Save this content as image"

how can i do that? i read all the php doc but there's nothing good to do this, even imagegrabwindow sucks because of its high load, browser limitations and also no XY or width/height control

so basicly i want to do this: get #div content, click on Save as image, then the user get a jpg or png of that div, like it was a printscreen

thank you ps: i dont want to pre-generate the content using GD, and neither want to save as PDF

Answer 1

Maybe a technique like this SO question will be of assistance?

Answer 2

The only thing I can really think of is to serialize the contents/placement/attributes of the content in the div, send that to the server, and have the server recreate the same elements, same positioning, same attributes with GD.

Off the top of my head, I'd see maybe inspecting the div and creating basically a form post, something like:

POST['images'][0]['file']='plane.jpg'  
POST['images'][0]['position']['x']=23  
POST['images'][0]['position']['y']=13  
...repeat for each image  
POST['text'][0]['content']='this is a plane!'  
POST['text'][0]['size']='10px'  
POST['text'][0]['font']='Arial'

The server could use this data to recreate what the user created in their browser.