Capture an iframe as an image

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 code in the parent page from reading an arbitrary third-party iframe document. A frame sandboxed without allow-same-origin has an opaque origin and may be inaccessible even when its URL looks local. SnapDOM cannot bypass either security boundary. For an authorized target, Playwright or Puppeteer can open the document as its own page or evaluate inside the frame's context, inject SnapDOM there and capture it separately. If you only need one composed bitmap of the parent and its frames, the automation tool's native page screenshot is usually the shorter path.