Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


capturing part of webpage as image

Posted on 2006-07-19
Medium Priority
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 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
LVL 17

Assisted Solution

akshah123 earned 1000 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.
Independent Software Vendors: 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 51

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)...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?
LVL 51

Accepted Solution

Steve Bink earned 1000 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


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

604 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