[RESOLVED] capturing part of webpage as image

jtb4x

I don't know if this is possible, especially since I haven't been able to find any answers by searching around so I figured I'd ask a group of experts.

Say I use ajax-like code that creates an "image" with data points from a database. It's not really an image though. It is a div tag that has a background image of a graph and then using php I grab the data points I need from the database and display them via javascript by giving them each a div tag (with a higher z-index than the background div tag) with its location based off the information I get from the database. So essentially, I have an absolutely positioned area on the website (where I put the backround image) that contains a bunch of layered div tags on top of it. I want my users to be able to save this graph "picture". I know I could just reverse the process and save all the coordinates of the div tags into the database with the user's id to make it so that he can just have the graph recreated each time he visits the page. However, I'd really like to give them the option of saving the "image" as an actual image to store on the server, either for later use or to save to their desktop on another page.

I realize that an svg would be a good fit here but my client doesn't wasn't their customers to have to install any plugins to view the graph (and most users use IE, not mozilla). Does anybody know of code/resource or even where to start for having the browser essentially take a picture of a specified part of the web screen and saving it as a file. I know this is a longshot but it's worth a try.

bogu

Look in here: http://phpbuilder.com/board/showthread.php?t=10323964

MarkR

You could create the image on the server using the PHP image functions, then serve it to the client. If they then wanted to save it out, that would be straightforward.

If you're going to do stuff on the client side, saving it as an image is not easy.

Specifically, you can't do this in Javascript without a canvas that supports the toDataUrl() method to save out the image. Currently I think only Safari does this (although Firefox 2.0 may).

Mark

jtb4x

Thanks for the link Bogu....That's a really cool service...However, it seems to be able to certain sites as well as with certain conditions...plus, if I let the user change the appearance with javascript, it looks as if the service won't capture the new looking site. Mark, you're right that if possible, I should stay away from doing client side stuff so that I can just use php image manipulation...However, the service I want to provide (as well as another one that needs the ability to do this more but is harder to explain) needs to be able to save an image from a series of divs that are dynamically created via javascript by the user.

Would something like having the main background div container in an iframe or something similar work? That way, I could figure out how to do something similar to what ArtViper does that would take a picture of the page contained within the iframe. I haven't worked with Iframes. Is that possible?

MarkR

You cannot do the same as what Artviper does (Render a web page to an offscreen surface, then convert it into an image file) without A LOT of work. The server setup would be nontrivial, to say the least (I just about know how to do it using a XUL application running on the server using a canvas and rendering a window etc, using Mozilla 1.8 or something as a base; there are other ways but they're also complicated).

Mark

jtb4x

I figured that artviper's program probably was a lot of work to replicate...never can hurt to ask though...anyways, what about if I used something like you suggested with php's image functions, maybe with imagemagik...is there any way for javascript and php to interact (maybe through ajax) where I can save the location of div tags (via javascript) and store it temporarily in a database (via php) as well as their respective imageID's...then when the user clicks "save as image", I can run a server side script that grabs the div information that is now stored in the database and since I know each image as well as its location, I can recreate the "image" using imagemagick functions...could that work?

MarkR

For all the work you're talking about, just generating the image on the server side sounds like a better idea.

Move all the code for calculating the positions of your items etc, to the server side - then you can transmit it to the client side (if you really want) to be rendered by Javascript, or you can serve it as a PNG or something via PHP and have the added bonuses that

It'll work without Javascript and
The user will be able to easily save the image out

Mark

jtb4x

That sounds like a good idea. I'm gonna do the image generation in php and allow them to save it. Then maybe in the future, add javascript options to make it cooler for users while still maintaining usability and it still working for users without javascript.

Thanks a lot for the help!