How to screenshot website in JavaScript client-side / how Google did it? (no need to access HDD)

Question

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)

Solution 1

This answers your problem.

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

Update:

There is a library for this now https://html2canvas.hertzen.com/

Solution 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

Comments

[Jim Blackler]

This SO question may help stackoverflow.com/questions/60455/…

[Paweł Szymański]

@ZachSaucier thanks, but as described in another answer: "may not be 100% accurate to the real representation as it does not make an actual screenshot"

[Paweł Szymański]

@Michał Perłakowski This question has much more depth and solutions discussed than the marked as duplicate of one. I any then the other one should be marked a duplicate.

[maltem-za]

Also see stackoverflow.com/a/32776834/207981

[Rolf]

Taking a "proper" screenshot will circumvent XSS protection as you would be able to see cross domain iframes to which you should not have access. For this reason, I don't think it is possible nor will be implemented. For example, by using a Facebook social widget and taking a screenshot of the page, you would be able to see the name any of your visitors who are logged into Facebook.

[Paweł Szymański]

Thanks, but that's, quote: "may not be 100% accurate to the real representation as it does not make an actual screenshot". Not for me :(.

[Vaibhav Garg]

then I believe flash is for you coldfusion.se/devnet/air/flex/articles/air_screenrecording.h‌​tml but I am doubtful if it will allow this effortlessly on a webpage as such a screen grab could be used for malicious actions and privacy invasion

[Niklas]

@Pawel Szymański Google Feedback isn't 100% accurate either. Try adding some list items (with default icons), try text underlines on different browsers (for example FF compared to Chrome) with a high font-size (for better visibility), or just a bunch of different more rare CSS3 properties. You'll find out that it is far from 100% either and unless you want to do it natively with just Javascript, it currently is the only option to go with.

[PHP Rocks]

You can use a similar technique using GrabzIt's free HTML to Image JavaScipt API you just need to ensure that all resources, CSS, Javascript and image files etc in the web page HTML need to use absolute URLs' then you use JavaScript to get the outer HTML and pass it to GrabzIt's API.

[jscul]

For the people coming here late... this can now be done with... navigator.mediaDevices.getDisplayMedia({video: true}) then const stream = await startCapture(); const track = stream.getVideoTracks()[0]; let imageCapture = new ImageCapture(track); lastly imageCapture.grabFrame() and that returns a promise with an image bitmap.