How to screenshot website in JavaScript client-sid

问题:

This question already has an answer here:

• Using HTML5/Canvas/JavaScript to take in-browser screenshots 3 answers

I\'m working on web application that needs to render a page and make a screenshot on the client (browser) side.

I don\'t need the screenshot to be saved on the local HDD though, just kept it in RAM and send it to the application server later.

I researched:

1. BrowserShots alike services...
2. Mechanized browsers...
3. wkhtmltoimage...
4. Python WebKit2PNG...

But none of those gives me all I need, which is:

1. Processing at browser side (generate screenshot of page). Don\'t need to be saved on HDD! Just...
2. ...send image to Server for further processing.
3. Capturing whole page (not only visible part)

Eventually I came upon Google\'s Feedback Tool (click \"feedback\" on YouTube footer to see this). It contains JavaScript for JPG encoding and two other huge scripts which I can\'t determine what exactly they do...

But it\'s processed on the Client side - otherwise there would be no point putting this huge JPEG encoder in the code!

Anyone have any idea how did they made it / how I can make it?

Here is an example of the feedback (report a bug on some screens)

回答1:

\"Using HTML5/Canvas/JavaScript to take screenshots\" answers your problem.

You can use JavaScript/Canvas to do the job but it is still experimental.

回答2:

I needed to snapshot a div on the page (for a webapp I wrote) that is protected by JWT\'s and makes very heavy use of Angular.

I had no luck with any of the above methods.

I ended up taking the outerHTML of the div I needed, cleaning it up a little (*) and then sending it to the server where I run wkhtmltopdf against it.

This is working very well for me.

(*) various input devices in my pages didn\'t render as checked or have their text values when viewed in the pdf... So I run a little bit of jQuery on the html before I send it up for rendering. ex: for text input items -- I copy their .val()\'s into \'value\' attributes, which then can be seen by wkhtmlpdf

回答3:

SnapEngage provides this service using a Java applet. You can use their product Snapabug or re-create their functionality using the information here. You can also read about it here .