I have an iframe in my webpage where I can load websites dynamically. Is there any way to capture only the iframe and save it as an image? If not possible, is it possible to take an screenshot of the whole page using JavaScript?

I have an iframe in my webpage where I can load websites dynamically. Is there any way to capture only the iframe and save it as an image? If not possible, is it possible to take an screenshot of the whole page using JavaScript?

• javascript
• html
• iframe
• screenshot

• 1 if you just want to get the screenshot of an element, certainly its possible. Follow this link LINK! Still cannot add ment.. – Francis G Commented Mar 28, 2019 at 2:35
• 1 From a cross-domain iframe? ;-) No easy and cross-browser way from your scripts no. Browsers are pretty lenient to let anyone do <iframe src="your_bank">.record(). Now, if it's for personal use, your OS may have a screenshot feature already. Your dev-tools probably have one. Building an extension is certainly possible, and if you wish to only target Firefox's users, then you could ask them to share their screen. – Kaiido Commented Mar 28, 2019 at 3:04

2 Answers 2

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 url2png

Or use html canvas to do this

Look at the html2canvas project. Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire body or just a specific element.

It is also really easy to use. Here is an example:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

You can adapt it to your code relatively easy.

Take a look at their demo. Click on any of the buttons and then scroll to the bottom of the page.

To be able to use html2canvas in your iframe you may need to inject it in and then execute it from inside iframe context. The following may help you to achieve this: inject a javascript function into an Iframe