I have this idea that I want to do basically a "state capture" of a web page through javascript.

Basically, a user will click a button, and the script will run, capturing all objects and their styles in a way that can be recreated later without referencing external CSS files and images.

The script could export HTML or JS, but obviously all images would have to be data urls and all styles would have to be inline/hard coded.

Does anyone know of a tool that do this or have any advice on where I would start? I'm thinking it would be very useful for a bug report submission on an application I'm working on.

Sure, the user can upload a screenshot, but I'm trying to save them the step (and basically have a screenshot on every bug report). JS cannot do an actual image capture, so I think a full dom export would be just as good.

Any ideas would be fantastic.