1

Is it possible to capture the entire window as screenshot using JavaScript? The application might contain many iframes and div's where content are loaded asynchronously.

I have explored canvas2image but it works on an html element, using the same discards any iframe present on the page.

I am looking for a solution where the capture will take care of all the iframes present.

Joydeep Bhattacharya
  • 85
  • 1
  • 11

3 Answers3

2

The only way to capture the contents of an iframe using ONLY JavaScript in the webpage (No extensions, or application running outside the browser on a users system) is to use the HTMLIFrameElement.getScreenshot() API in Firefox. This API is non-standard, and ONLY works in Firefox.

Browser compatibility chart

For any other browser, no. An iframe is typically sandboxed, and as such it is not accessible by the browser by design.

The best way to get a screenshot of a webpage that I have found and use, is an instance of Headless Chrome or Headless Firefox. These will take a screenshot of everything on the page, just as a user would see it.

Austen Holland
  • 1,828
  • 1
  • 15
  • 24
  • The edit doesn't looks good. If the OP want to add this as a service in their web application, headless chrome/firefox isn't a choice. Because OP doesn't have access to the system – Sagar V Aug 28 '18 at 17:06
  • You can easily use headless chrome/firefox in a web application. (I use it in several, which is why I added it as an option) While it may be more involved, you can create an API where you pass a url, and get back image data. You can then use AJAX to communicate with this API in a web application. https://c.flm.pw/2018-08/kannD9.png – Austen Holland Aug 28 '18 at 17:18
  • Can you open headless chrome on a remote system with javascript? – Sagar V Aug 29 '18 at 02:09
  • @SagarV You would use some form of AJAX to use/open headless chrome on a server you control. – Austen Holland Aug 29 '18 at 16:10
  • Not on server. on client side. for example, in google, when you click feedback button, they'll attach a screenshot. Like that – Sagar V Aug 29 '18 at 16:12
  • 1
    If the webpage you are trying to capture has iframes with a source of a different domain then the webpage, this is NOT possible. If your webpage has no iframes, or the iframes are from the SAME domain as the webpage, you can take a look at this answer: https://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-in-browser-screenshots – Austen Holland Aug 29 '18 at 16:42
1

Yes, widh Puppeteer it is possible.

1 - Just install the dependency:

npm i puppeteer-core

2 - Create JavaScript file, screenshot.js

const puppeteer = require('puppeteer');

(async () => {

   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://yourweb.com');
   await page.screenshot({path: 'screenshot.png'});

   await browser.close();
})();

3 - Run:

node screenshot.js

Source

Ever CR
  • 351
  • 3
  • 7
  • I'm not sure what the OP want exactly. But canvas2image is a client side library and capture what the client sees. This one is a server side script and capture the static page without dynamic contents. For example, it doesn't contain logged in user details, their data, etc. – Sagar V Aug 28 '18 at 17:07
  • With puppeteer you can do everything you do in Chromium. It has very few limitations, and if you want to, you can login before on the page in question. I can help you if you want. – Ever CR Aug 28 '18 at 17:45
  • You can also use it from client sides, using https://github.com/browserify/browserify – Ever CR Aug 28 '18 at 17:56
  • @Edd does it work when you have frameset and iframes on the page. In my case there can be nested iframes as well. – Joydeep Bhattacharya Aug 31 '18 at 17:11
0

Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...

For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.

You should try https://www.url2png.com/

Blackfish
  • 54
  • 4