Question

I tried using html2canvas to generate a screen captures for a portion of the screen but It generates am image of the entire document.

Am I doing something wrong here ? (“graph” is a div id)

$("#graph").html2canvas();

Also,how do I save the resulting image to another location other than the specified element ?

Answer 1

Can you clarify what you mean by saving the image to another location? If I’m understanding what you’re asking, assuming you are using the "jquery.plugin.html2canvas.js", you need to edit the "$canvas.css" line in that file, to specify where you want to append your canvas object.

One option you may consider is to keep it appending to the body, but set the css to "display: none" so that the object doesn’t keep showing up. Then, after the css properties you can put in your own function to manipulate the canvas object.

$canvas.css({width: '500px', height: '500px', display:'none'}).appendTo(document.body);
$canvas.attr('id', 'canvasObj');
manipulateCanvasFunction(document.getElementById('canvasObj'));

This sends the complete canvas object to your "manipulateCanvasFunction," and you can do whatever you want with the canvas object.

You might check out this question thread for some other ideas.

Edit: Removing incorrect information