Convert and save image generated by javascript and css

[ttruong]

Hi,
I have a graph generated dynamically according to the data from a database using javascript and css and displayed inside a div of an html page. My question is is there anyway I can convert that graph to image in any of these jpg,png,gif... format. Thank you.

[Dormilich]

you can do that server side (with e.g. PHP). I'm not aware that JS can do that.

regards

[gits]

for mozilla/FF you could play with the <canvas> element and its special moz-additions ... for a start have a look here at the last section: 'Rendering Web Content Into A Canvas'

kind regards

[ttruong]

Hi gits, thank you for your reply. I tried to use the canvas with FF but it gave me an error 'getContext is not a function. Can I pass the output of the graph function directly to the draw() as the image source?
Could you give me some sample codes?
Thank you.

[gits]

hi ... there is a problem with the privileges ... so you need to request that for your code ... have a look at the following simple example that you could simply test in FF's Firebug-extension:

netscape.security.PrivilegeManager.enablePrivilege(
    "UniversalXPConnect");
 
var canvas = document.createElement('canvas');
 
canvas.setAttribute('width', 600);
 
canvas.setAttribute('height', 600);
 
var ctx = canvas.getContext("2d");
 
ctx.drawWindow(window, 0, 0, 600, 600, "rgb(0,0,0)");
 
document.lastChild.appendChild(canvas);
 

this will just add a canvas-node with a 600x600px screenshot to a document that is loaded in FF actually when you run it with firebug. note that this code is not really usable for public webapps but for intranet-apps or a personal app you may create easy screenshots this way.

kind regards