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    BrowserShots alike services    Mechanized browsers    wkhtmltoimage    Python WebKit2PNG      But none of those gives me all I need  which is    Processing at browser side  generate screenshot of page   Don t need to be saved on HDD  Just       send image to Server for further processing  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

User · Answer

Using HTML5 Canvas JavaScript to take screenshots  answers your problem   You can use JavaScript Canvas to do the job but it is still experimental

User · Answer

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

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

Examples related to javascript

Examples related to screenshot

Examples related to capture

Examples related to google-search