SysCapstone
asked on
capturing part of webpage as image
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.
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.
ASKER
you're right, though I should have been a little more clear. I was more looking for a technique to save the specified area of the page...the graph thing was just an example...it's one of the things I may need something like what I am asking for...you're right that my example with php functions is the easier way to go
in general, say that I have content on my page that users can change via javascript (ie. delete a div tag or move it or whatever)...I want to give them the option to save their new look...so if I have a big background div tag and a bunch of little div tags within it, I want the user to be able to delete or move these little div tags via javascript...the part that I can't figure out is how to let them click a button on the page that runs a script to save the appearance of the big div container as an image
in general, say that I have content on my page that users can change via javascript (ie. delete a div tag or move it or whatever)...I want to give them the option to save their new look...so if I have a big background div tag and a bunch of little div tags within it, I want the user to be able to delete or move these little div tags via javascript...the part that I can't figure out is how to let them click a button on the page that runs a script to save the appearance of the big div container as an image
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Given that you already have a map of the points you are using to create the <div>s, you have the information you need to recreate that part of the image. You could trigger that process based on a user's submission, create the image in PHP, and make it available for download. As akshah123 pointed out, though, saving the image on the user's machine requires explicit permission in the form of a download, or locally-triggered action (Save As, for example).
ASKER
OK...what if I wanted a user to be able to move certain points around or if I gave them a line as a div tag that they could move via some javascript around the background div....(for analysis reasons, they can move the line around the graph to show patterns they see and save that as an image)...now, the location of the div tags are specified by the user, not by me because they moved them. is there any way for javascript and php to interact (maybe through ajax) where I can save the location of div tags (via javascript) after they move 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?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://us2.php.net/manual/en/ref.image.php
This way you are using php to create images. User can just right clip and save the image themselves. There are also classes available that will give you tools to create charts and graphs without having to worry about the image functions.
http://quimby.gnus.org/circus/chart/chart-manual.php