Solved

capturing part of webpage as image

Posted on 2006-07-19
6
225 Views
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.
0
Comment
Question by:SysCapstone
  • 2
  • 2
  • 2
6 Comments
 
LVL 17

Expert Comment

by:akshah123
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.  

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
0
 

Author Comment

by:SysCapstone
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
0
 
LVL 17

Assisted Solution

by:akshah123
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.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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).
0
 

Author Comment

by:SysCapstone
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?
0
 
LVL 50

Accepted Solution

by:
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.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

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 is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now