Capturing application screen with JavaScript

Question

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.

Austen Holland · Accepted Answer · 2018-08-28 17:02:55Z

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.

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.

edited Aug 28, 2018 at 17:02

answered Aug 28, 2018 at 17:00

Austen Holland

1,9881 gold badge17 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sagar V Over a year ago

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

Austen Holland Over a year ago

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. c.flm.pw/2018-08/kannD9.png

Sagar V Over a year ago

Can you open headless chrome on a remote system with javascript?

Austen Holland Over a year ago

@SagarV You would use some form of AJAX to use/open headless chrome on a server you control.

Austen Holland Over a year ago

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: stackoverflow.com/questions/4912092/…

|

Ever CR · Accepted Answer · 2018-08-28 16:54:45Z

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

answered Aug 28, 2018 at 16:54

Ever CR

3513 silver badges7 bronze badges

4 Comments

Sagar V Over a year ago

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.

Ever CR Over a year ago

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 Over a year ago

You can also use it from client sides, using github.com/browserify/browserify

Joydeep Bhattacharya Over a year ago

@Edd does it work when you have frameset and iframes on the page. In my case there can be nested iframes as well.

Blackfish · Accepted Answer · 2018-08-28 16:59:32Z

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/

answered Aug 28, 2018 at 16:59

Blackfish

544 bronze badges

2 Comments

Sagar V Over a year ago

I think OP want to add it in their website not for their personal use. Don't recommend a tool when they ask for a method to do something.

Joydeep Bhattacharya Over a year ago

exactly, I want to capture screenshot based on events

Collectives™ on Stack Overflow

Capturing application screen with JavaScript

3 Answers 3

6 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related