Capture an iframe as an image
Include a same-origin iframe in an element capture while preserving the frame’s visible viewport and surrounding styles.
Capture the parent container normally. Same-origin iframe documents are accessible; cross-origin iframe contents are not.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
const panel = document.querySelector('#panel-with-frame')
const image = await snapdom.toPng(panel, {
placeholders: true,
embedFonts: true,
})
document.body.appendChild(image)Why this pattern works
SnapDOM reads an accessible iframe document, captures its visible content and places the result back into the parent snapshot. A cross-origin frame cannot be read, so it is drawn as a striped placeholder of the same size (the default) and a console warning names it; the parent layout never collapses around it.
Capture a same-origin iframe
The embedded srcdoc frame is same-origin and can be included in the parent capture.
Limits and common mistakes
The same-origin policy prevents JavaScript from reading arbitrary third-party iframe documents. A client-side library cannot bypass that boundary.
Frequently asked questions
Can I capture a YouTube or third-party iframe?
Not directly when it is cross-origin. The browser blocks access to its document.
What happens to inaccessible frames?
They become a striped placeholder the size of the frame, so the surrounding layout is unchanged and the unavailable content is explicit. That is the default; pass placeholders: false for an invisible spacer of the same size.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstallation