最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to capture an iframe as an image - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question edited Mar 28, 2019 at 2:58 Adnan Toky asked Mar 28, 2019 at 2:26 Adnan TokyAdnan Toky 1,9432 gold badges14 silver badges20 bronze badges 2
  • 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
Add a ment  | 

2 Answers 2

Reset to default 3

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

发布评论

评论列表(0)

  1. 暂无评论