Hi all, 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..
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...
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.
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.
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).
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.