Render HTML document thumbnail

Question

Is it possible to get an image of html document using javascript. I am looking for a javascript function like document.getThumbnail() or window.render() that return a PNG of the html document.

Answer 1

There are three different APIs that I can recommend:

1. If you are willing to run a headless instance of Chrome, you can call Page.captureScreenshot. (docs) and example code
2. If you are running inside as a browser extension, you can use the chrome.desktopCapture or visibleCapture API. (docs) and example code
3. If you want to do this in plan JS, you can use html2canvas which lets you convert HTML dom to a canvas view, which you can then export and save as a file. However, the screenshots are not necessarily accurate:

   This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.