Screenshot an iFrame content inside html2canvas "capture"

Hello.

I understand from html2canvas documentation - as much as my level allow me to understand - that third party content like iFrames will not be captured as the screenshot is related only to the same page content - "not make an actual screenshot, but builds the screenshot based on the information available on the page".
So, if I add an iFrame on the page, the content from the iFrame will not be captured.

iFrame

1) Is that correct?
//
2) As I need this type of screenshot, does anyone can offer a solution?

From my perspective - but I have no clear idea if this is too complicated to be done -, I think, maybe there can be 2 steps for final screenshot, e.g.
step 1 - screenshot of the iFrame content,
step 2 - screenshot with the image from step 1 inside of the final scene / content?

This is a functional file with the iFrame included:
Image and iFrame.zip (66.6 KB)

Thank you!

It looks like it may have once worked with a same origin iframe, but the developer seems to have removed the feature and is not interested in fixing it.

I think you're out of luck, at least with html2canvas. It may be theoretically possible to work though, as there are ways in which a parent can get at the child DOM. I'm not sure if other projects support it; there might also be separate projects which allow doing a DOM copy from a iframe into a parent. If you run that first, then you could use html2canvas for the screenshot. However I'd imagine there are tons of edge cases with this approach where things may not work as expected.

3 Likes

As always, thank you so much @jonathan for your answer!

1 Like