0

I was wondering if it's possible to create an image of a div inside a page in php, jquery or javascript? Or even just a screenshot of the entire page (on my own server - not external)..

What I want to do is create an image of a graph (drawn in via jQuery) and pass it onto a PDF, as I can't seem to get the jQuery to display in the pdf..

SoulieBaby
  • 5,405
  • 25
  • 95
  • 145
  • Perhaps this thread can be of some help: http://stackoverflow.com/questions/839216/create-an-image-of-a-div-in-javascript-gif-png – Kaleb Brasee Nov 13 '09 at 00:43
  • yeh I had a look at that, thank you, but i don't think I can use it for what I need – SoulieBaby Nov 13 '09 at 00:44
  • Can you change your app in order to generate the graph on the server side or does it have to be done in jQuery? – JPCosta Nov 13 '09 at 00:49
  • I'm using jQuery Flot (and some php) to create a graph dynamically depending on what options they've chosen to display.. I couldn't seem to find a php one which didnt look like crap lol – SoulieBaby Nov 13 '09 at 00:52
  • Depending on your graph needs you could use Google Charts (http://code.google.com/apis/chart/) – donohoe Nov 13 '09 at 02:33

5 Answers5

2

Because of the security risks, it is not possible to get Javascript to make a screenshot of a web page. This would allow you to steal credit card info, etc... You can use an active X control or something like that, but the client has to knowingly install it in order for things to work.

In PHP, you can create an image and place it on a web page, but again, you cannot see what is on the client's screen. It has to be done on the server before it is sent to the client.

Here is an example of a library you can use to draw a graph in PHP. http://www.aditus.nu/jpgraph/

You might be able to mimic what jQuery is doing in your script but it will take a shift in your applications design.

Brian Duncan
  • 480
  • 3
  • 12
  • Well I really just want my jQuery graph to be turned into an image somehow.. i don't mind if it's done before the client sees it or not.. just don't know how to do it :( – SoulieBaby Nov 13 '09 at 00:47
  • I edited the post with some more info on drawing graphs straight through PHP - might help – Brian Duncan Nov 13 '09 at 00:54
1

Take a look at this article:

http://www.developerfusion.com/code/181/capture-screenshot/

It's not client-side code, but you mentioned PHP so maybe server-side code is an option. I don't think you can do it client-side...

Jason
  • 51,583
  • 38
  • 133
  • 185
1

How about using a server side graph generator, for example for PHP? Maybe the transition hurts but you'd get a really stable and simple solution.

If you describe what kind of charts you exactly generate and what server side options you have, I'm sure you'll get some specific hints.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
1

Your best bet is to use the GD library on the server to generate the graph as needed. There's no practical way to screencap the browser canvas. Check out this PHP graphing library, it may be what you're looking for:

http://graphpite.sourceforge.net/

If you run into problems where you're doing processing on the client-side that don't exist on the server (i.e.: summing up rows or taking in user settings from cookies), maybe you need to consider passing that data back to the server and letting your hosting handle it (after all, that's why you run a server with lots of RAM and a big CPU, to crunch numbers).

mattbasta
  • 13,492
  • 9
  • 47
  • 68
1

If your javascript draws the graph on a canvas, you can serialize the canvas and then send it to the server using POST.

I don't know if jquery can draw the graph on a canvas, but if the graph is a simple one you could probably code it yourself as canvas has drawing tools already.

Obviously, this only works with browsers supporting canvas.

GeoNomad
  • 769
  • 5
  • 6