Free tools Windows power users keep installed
One-click scans. No signup required.
First check whether the iframe is same-origin with the page containing the modal. If it is, you can try capturing the modal element with html2canvas after the modal and frame have loaded. If the iframe is cross-origin—or sandboxed without allow-same-origin—ordinary page JavaScript cannot inspect its document. In that case, use an integration the iframe owner explicitly supports or capture the rendered page in an authorized browser-automation workflow such as Playwright.
Choose the capture method by iframe ownership
An iframe is a separate document embedded in the modal. Whether the parent page can read it depends chiefly on the browser’s same-origin rules, not on whether the modal is open or visible. A page’s origin includes its scheme, hostname, and port; a difference in any of these can make the frame cross-origin.
| Approach | Use it when | Main limitation |
|---|---|---|
html2canvas on the modal |
The iframe is same-origin and an in-page, DOM-derived image is sufficient | It reconstructs the DOM rather than taking a native screenshot; cross-origin frame contents are inaccessible |
| Cooperation from the iframe owner | The frame is cross-origin and both applications can be changed | Requires an explicit, secure integration and permission to return the content |
| Playwright screenshot | You control an authorized browser session, such as in a test or backend workflow | Requires browser automation infrastructure; it does not grant parent-page JavaScript access to a cross-origin document |
| Browser extension screenshot API | You are building an extension with the necessary permissions | Permission and behavior depend on the browser and extension API |
Check same-origin and sandbox restrictions
For a same-origin iframe, browser JavaScript can ordinarily access the frame document, subject to the page’s actual loading state and other applicable restrictions. The html2canvas documentation says same-origin iframe contents are supported recursively, while cross-origin frame documents cannot be accessed. A sandboxed iframe without allow-same-origin has the same practical limitation for this capture approach.
Do not confuse this with a cross-origin image loaded inside a page. Canvas CORS settings can affect whether certain image resources may be drawn without tainting the canvas; they do not let the parent inspect a different-origin iframe document. Setting useCORS: true or configuring an image proxy is not a general workaround for iframe security boundaries.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Capture a same-origin modal with html2canvas
Install and load the library
Use the package manager or script-loading approach supported by your application. With a bundler, install html2canvas and import it into the code that opens or captures the modal:
npm install html2canvasimport html2canvas from 'html2canvas';The examples below assume the modal has an element with id="preview-modal" and contains an iframe with id="preview-frame". Replace those selectors with the ones in your application.
Wait for the modal and iframe, then capture
Run capture only after the modal is visible and its iframe has completed its load event. The library returns a promise that resolves to a canvas. Convert that canvas to a PNG blob for download or upload rather than building a large data URL unless your application specifically needs one.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
function waitForFrameLoad(frame) {
if (frame.contentDocument?.readyState === 'complete') {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
frame.addEventListener('load', resolve, { once: true });
frame.addEventListener('error', () => reject(new Error('Iframe failed to load')), { once: true });
});
}
async function captureModal() {
const modal = document.querySelector('#preview-modal');
const frame = modal?.querySelector('iframe');
if (!modal || !frame) {
throw new Error('Modal or iframe was not found');
}
if (!modal.getClientRects().length) {
throw new Error('Open and render the modal before capturing it');
}
await waitForFrameLoad(frame);
// Accessing contentDocument is permitted only when the frame is same-origin.
if (!frame.contentDocument) {
throw new Error('Iframe document is not accessible from this page');
}
const canvas = await html2canvas(modal, {
backgroundColor: null,
scale: window.devicePixelRatio || 1,
useCORS: true
});
const blob = await new Promise((resolve, reject) => {
canvas.toBlob(result => result ? resolve(result) : reject(new Error('Canvas could not be encoded')), 'image/png');
});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'modal-capture.png';
link.click();
URL.revokeObjectURL(link.href);
return canvas;
}The useCORS setting concerns external images and other eligible resources, not permission to read a cross-origin frame. Remove it if it is unnecessary for your page. If the modal is inserted dynamically, call captureModal() from the code path that runs after opening it rather than immediately after creating a hidden modal element.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Export other formats or inspect the canvas
To get a data URL for a small image or a specific consumer, use canvas.toDataURL('image/png'). For larger captures, toBlob() avoids the additional memory overhead of keeping a base64 string. JPEG can reduce file size for photographic content, but does not preserve transparency; WebP availability and encoding support should be checked in the browsers you target.
const pngDataUrl = canvas.toDataURL('image/png');
canvas.toBlob(blob => {
if (!blob) throw new Error('Image encoding failed');
// Send blob with fetch/FormData or create a download URL.
}, 'image/jpeg', 0.9);Crop, scale, and omit elements
html2canvas accepts options for output scale, dimensions, crop offsets, background, and ignored elements. For example, you can omit a close button that should not appear in the result, or capture a subregion by adjusting the capture coordinates and dimensions. Confirm the option names and behavior against the configuration reference, because the intended crop depends on the element’s position and the coordinate space you choose.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
const canvas = await html2canvas(modal, {
scale: 2,
ignoreElements: element => element.matches('.capture-ignore'),
x: 0,
y: 0,
width: modal.scrollWidth,
height: modal.scrollHeight
});The documented default scale is the device pixel ratio. A larger scale can produce sharper output, but increases canvas dimensions and memory use. Very large canvases may fail or be limited differently across browsers; capture only the required area and test realistic modal content on target browsers.
Understand what html2canvas can and cannot reproduce
html2canvas is not a native screenshot tool. It reads DOM and style information it understands and redraws a representation into a canvas. Its documentation cautions that the result may not be fully accurate to the real rendered page. Unsupported CSS, browser-specific rendering, fonts, animations, and embedded content can therefore differ from what the user saw.
If exact browser pixels matter, use a screenshot mechanism in a controlled browser environment instead of relying on DOM reconstruction. Also ensure the modal and its content are actually rendered at capture time: hidden elements, not-yet-loaded images, and late-loading iframe content cannot be assumed to appear correctly.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Capture through iframe-owner cooperation
When a frame is cross-origin, the parent page cannot reach into its document to capture it. If you control both applications, define a deliberate protocol instead. For example, the iframe application can capture its own permitted content and send an approved representation to the parent with postMessage, or expose a server-side capture endpoint to the parent application.
Validate message origin and source, restrict accepted message types and payload sizes, and return only content the caller is authorized to receive. The parent should verify the sender’s origin rather than accepting arbitrary messages. Avoid treating a proxy as a way to bypass browser controls: it does not create permission to access content that the iframe owner has not authorized you to capture.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use Playwright for an authorized browser screenshot
For end-to-end tests or a controlled server-side browser session, Playwright can capture the rendered page and provides frame-aware APIs. The screenshot is taken by the browser session rather than by the parent page attempting to read a cross-origin document. This is useful when the goal is a visual record of what the authorized browser rendered, but it does not remove the need to respect the iframe provider’s restrictions.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteBest Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Example using Playwright’s Node.js API, with the application URL and selectors replaced for your test environment:
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
try {
await page.goto('https://your-app.example', { waitUntil: 'domcontentloaded' });
await page.getByRole('button', { name: 'Open preview' }).click();
const modal = page.locator('#preview-modal');
await modal.waitFor({ state: 'visible' });
await modal.locator('iframe').waitFor({ state: 'attached' });
// If the application signals a reliable ready state, wait for that signal.
// A frame load event alone does not guarantee every embedded resource is ready.
await modal.screenshot({ path: 'modal.png' });
} finally {
await browser.close();
}Playwright also lets you enumerate frames and locate a frame by URL or other identifying information. Use that when your test needs to assert frame content or wait for a frame-specific condition, while keeping the distinction clear: the automation client operates a browser session; it does not make the parent page’s JavaScript same-origin policy disappear. See the Playwright screenshot documentation and frame documentation for current APIs and options.
Or skip the browser setup
If you need a screenshot of a publicly reachable page or iframe URL, ScreenshotNeo can return an image with one GET request. Its capture flow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. The service reports page verdict and billing status in response headers, and bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. It includes 1,000 screenshots per month free with no card, and paid plans start at $5 for 3,000 shots.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for authentication and request options. This is a hosted page-capture route, not a way to bypass a cross-origin frame’s permissions; use it only for URLs you are authorized to capture. Learn more at ScreenshotNeo, or sign up for 1,000 free screenshots a month with no card.
Recommended Free Tools
Troubleshoot missing or inaccurate captures
The iframe is blank in the result
- Cause: The frame is cross-origin or sandboxed without
allow-same-origin. Fix: Use owner cooperation or an authorized browser screenshot workflow;useCORSdoes not grant document access. - Cause: Capture ran before the iframe or modal was rendered. Fix: Open the modal, wait for the iframe load event and any application-specific ready signal, then capture.
The capture differs from what the browser displayed
- Cause: DOM reconstruction does not exactly reproduce all browser rendering. Fix: Check unsupported styling and resources; use Playwright or another browser screenshot mechanism when rendered-pixel fidelity is essential.
- Cause: Images, fonts, or other content loaded after the capture began. Fix: Wait for the relevant resource or application state instead of relying only on a fixed short delay.
The canvas is tainted or encoding fails
- Cause: A cross-origin image resource was drawn without a permitted CORS response. Fix: Configure that image host to allow the required origin, use a permitted resource-serving arrangement, or omit the resource. This issue is separate from iframe document access.
- Cause: Canvas size or memory demand exceeded a browser limit. Fix: Reduce scale, dimensions, or captured area, and test in the target browsers.
The capture throws a missing-element or hidden-element error
- Cause: The selector is wrong, the modal has not been mounted, or it is still hidden. Fix: Check the element lookup and invoke capture only after the modal is visible in the rendered document.
Frequently asked questions
Can I capture just the iframe rather than the whole modal?
For same-origin content, target the iframe or a containing element and adjust capture dimensions as needed. For a cross-origin frame, selecting the iframe element does not give the parent access to the frame’s document contents.
Does an iframe load event mean its page is ready for capture?
It means the frame’s load event fired, but an application may still have late-loading or dynamically rendered content. If you control the embedded app, signal readiness explicitly and wait for that state.
Can a browser extension capture a cross-origin iframe?
An extension may have browser-specific screenshot capabilities when granted the relevant permissions. That is a distinct privileged extension workflow, not a capability available to ordinary page JavaScript; verify the API and permissions for the browser you support.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
