如何将iframe捕获为图像

Question

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?

Answer 1

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.

Answer 2

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