Screenshot an iFrame content inside html2canvas "capture"

jonathan · September 7, 2021, 7:25pm

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.

github.com/niklasvh/html2canvas

Same origin iframes aren't getting rendered

opened 01:27PM - 24 Apr 14 UTC

closed 08:23AM - 20 May 14 UTC

Snede

Feature

Same origin iframes aren't getting rendered. ![image](https://cloud.githubuserc…ontent.com/assets/5442658/2789835/b3eb3cf6-cbb3-11e3-963c-b1ee647aab5d.png) Page: ``` html <html> <head> <script src="/html2canvas.js"></script> <script> function render(){ html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); } </script> </head> <body> <input type="button" value="picture" onclick="render()"></input> <iframe src="/hello.html"></iframe> </body> </html> ``` Iframe content: ``` html <html> <head> </head> <body> <h1>Hello World</h1> </body> </html> ``` Log: ``` html html2canvas: Preload starts: finding background-images html2canvas: Preload: Finding images html2canvas: Preload: Done. html2canvas: start: images: 0 / 0 (failed: 0) Finished loading images: # 0 (failed: 0) finished rendering 0 children. finished rendering 6 children. Done parsing, moving to Render. html2canvas: Renderer: Canvas renderer done - returning canvas obj ```

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.