capturing part of webpage as image

Posted on 2006-07-19
Last Modified: 2013-12-12
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.
Question by:SysCapstone
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
LVL 17

Expert Comment

ID: 17141619
Is there a reason why you are using the ajax-like code to create graphs?  PHP has a GD library that will help you with creating actual images.

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.

Author Comment

ID: 17141767
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's one of the things I may need something like what I am asking'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 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
LVL 17

Assisted Solution

akshah123 earned 250 total points
ID: 17147165
>>>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
To tell you the truth, i have not tried anything like this over even seen such a thing anywhere.  Without questioning the purpose of such a functionality, I don't think that such a thing is possible without using some sort of an application that runs on the client's machine.  

I think the closest you can get is save the criteria that was used to create the image (or part of the website) and each time use the criteria to recreate that part of the website.  Saving how the page looks on client's machine as an image would most likely requires control of user's computer beyong the scope of pure javascript and thus requires either active-x or an application on client's computer.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 50

Expert Comment

by:Steve Bink
ID: 17148199
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).

Author Comment

ID: 17148464
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), 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?
LVL 50

Accepted Solution

Steve Bink earned 250 total points
ID: 17148716
While I'd be the first to say that system is WELL outside my skill set, I do think it is possible in concept.  My first strategy would be to create the user-draggable div tags.  Once I have that, I would create a javascript function triggered on the 'drop' side of the drag-n-drop.  The function would take the coordinates of the newly dropped div and place them in hidden form fields.  You would need to manage these fields on the fly as users created/deleted div tags.  Once the area is complete, they hit the submit, and the entire array of coordinate data is POSTed to the next page.  That page will build the image using the GD library and make the resulting file available for download.  Injecting database functionality into this scheme would be pretty easy, but you would be limited to the PHP-side of the equation.

As far as ajax, you could probably benefit from using it in this project.  From what I understand, it allows a client UA to interact with a server-side database... ideal for this type of project.  I have not worked at all with ajax, so I'd have to defer you to someone more capable in that area.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question