Export div content to image

Currently I'm working on a project in which user of website can design a giftwall by drag and drop of gifts. Drag, drop and sorting works perfect and I'm able to store generated giftwall into database. On recipient side system lists all the gift images in the same sequence sender sent so it visually l开发者_如何转开发ooks like a giftwall. I want to allow users to store this giftwall into a single image so they can store their giftwalls into image album. In current system it lists all individual gifts into a individual div resided in main wrapper div. How can I export this wrapper div to image so it looks same as HTML. Any help will really be appreciated. Waiting for reply.

Thanks!

I don't know if there is a way by using pure javascript, but you can generate the image on your server and send it back.

I have never heard of saving browser's viewport to an image file via JS. I think it's only possible vie creating SVG or using HTML5 canvas.

I asked exactly the same thing a while back.
HTML div to screenshot?

The conclusion is... it is not possible with JS. Questionably possible from PHP also.
Use can use an online service for screen capture, like browsershots, but its not in real-time, and doesn't render everything well.

I used a workaround for my situation. Recreated all the DOM/HTML elements which create the image (load parameters form database, and generate the DOM). Wrap everything in one container div, and zoom it out to the size you need.

I know, not the prettiest solution, but the only solution I could get to work.

Using <canvas> you can create image that will looks similar to how it looks on the page. Try it this way: Get the size of wrapper <div> and create the same canvas element. Then get the position of each image in the div wrapper and draw that image on canvas at the same position with the same size. Things may be harder if you need to draw additional controls, like button or textbox.

All modern desktop browsers suport <canvas> now.

You can either use html2canvas, which isn't perfect yet. Or store browser offsets of elements in div and then with GD or ImageMagick combine them into an image

Maybe this could be of use: http://html2canvas.hertzen.com/