Recommended Free Tools
Remove a cookie banner from an html2canvas image in one of three ways: add data-html2canvas-ignore to the banner wrapper you control, return true for that wrapper in ignoreElements, or remove the banner from html2canvas’s cloned document with onclone. These methods affect html2canvas’s DOM reconstruction; they do not remove content inside an inaccessible cross-origin iframe or create a native browser screenshot.
Choose the method that matches your page
| Method | Use it when | What changes | Main caution |
|---|---|---|---|
data-html2canvas-ignore |
You control the banner template | Marks an element and its subtree to be skipped | Put the attribute on the outer banner container |
ignoreElements |
You cannot edit the banner markup | A predicate excludes matching elements | Use a specific, verified selector |
onclone |
You need capture-only DOM changes | Edits the cloned document used for rendering | The selector must exist in the clone |
All three options are documented by the html2canvas project. See the examples, configuration reference, and the clone callback documentation.
1. Add data-html2canvas-ignore to markup you control
The simplest implementation is declarative. Add the attribute to the banner’s outer element, not merely to a close button or text node:
<div class="cookie-banner" data-html2canvas-ignore>
<p>We use cookies to improve this site.</p>
<button type="button" class="accept-cookies">Accept</button>
</div>
<script type="module">
import html2canvas from 'html2canvas';
const canvas = await html2canvas(document.body);
document.querySelector('#preview').replaceChildren(canvas);
</script>When html2canvas walks the document, it skips the marked element and its descendants. This leaves the live page unchanged: the banner remains visible to visitors, but it is absent from the rendered canvas.
If your application mounts the consent component asynchronously, start the capture only after the wrapper has been inserted. A reliable application-level signal is preferable to an arbitrary short timeout.
2. Exclude an uneditable banner with ignoreElements
When a consent vendor or shared layout does not let you add an attribute, provide a predicate. Return true only for the banner wrapper:
import html2canvas from 'html2canvas';
const canvas = await html2canvas(document.body, {
ignoreElements: (element) => element.matches('.cookie-banner'),
});
document.querySelector('#preview').replaceChildren(canvas);.cookie-banner is an example, not a universal vendor selector. Inspect the page and replace it with a stable class, ID, or other banner-specific match. Avoid predicates such as element.tagName === 'DIV' or “every button”; those can remove ordinary page content.
You can combine several known selectors without broad filtering:
const ignoredSelectors = [
'.cookie-banner',
'#consent-manager',
'[data-consent-modal]'
];
const canvas = await html2canvas(document.body, {
ignoreElements: (element) =>
ignoredSelectors.some((selector) => element.matches(selector)),
});Test the predicate against the actual outer node. If the vendor replaces that node after page load, update the selector or wait for the final component before invoking html2canvas.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
3. Remove the banner only from html2canvas’s clone
onclone receives the cloned document that html2canvas will render. Removing a node there keeps the source page and its consent state untouched:
import html2canvas from 'html2canvas';
const canvas = await html2canvas(document.body, {
onclone: (clonedDocument) => {
clonedDocument.querySelector('.cookie-banner')?.remove();
},
});
document.querySelector('#preview').replaceChildren(canvas);This approach is useful when capture policy differs from the visitor’s view, or when you want all capture-only edits in one callback. The optional chaining prevents an exception when the banner is not present. If you need to hide rather than remove it, change a clone-only style instead:
onclone: (clonedDocument) => {
const banner = clonedDocument.querySelector('.cookie-banner');
if (banner) banner.style.display = 'none';
}Use the callback documented for the html2canvas version installed in your project. The project’s getting-started guide covers installation with npm, yarn, pnpm, and a CDN.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
When the banner is in an iframe
A banner inside a same-origin iframe may be accessible if your code can legitimately inspect that frame’s document. A cross-origin iframe is different: browser security rules prevent the parent page from reading its contentDocument. html2canvas cannot use a parent-page selector, ignoreElements, or onclone to inspect and remove nodes inside that inaccessible document.
In that case, capture content outside the frame, configure consent in the iframe’s owning application, or arrange cooperation from the iframe provider. Do not assume that hiding the iframe element removes the pixels of a separately rendered, cross-origin document in the way you intend.
html2canvas is not a native screenshot
html2canvas traverses readable DOM information and constructs a canvas representation. It does not copy the browser’s final composited pixels. Unsupported CSS, fonts, animations, video, canvas content, and inaccessible resources can therefore make the result differ from what is visible on screen. Removing a same-document banner solves one DOM-rendering problem; it does not bypass browser security or add support for every CSS feature.
For a dependable result, wait until the page has reached the visual state you want, load required fonts and images, and inspect the output at the target viewport and scale. The project explains these rendering constraints in its documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Build a reusable capture function
A small wrapper keeps selector choice, readiness checks, and error handling in one place:
import html2canvas from 'html2canvas';
export async function capturePage({
target = document.body,
bannerSelector = '.cookie-banner',
waitForBanner = false,
} = {}) {
if (waitForBanner) {
await new Promise((resolve) => {
if (document.querySelector(bannerSelector)) return resolve();
const observer = new MutationObserver(() => {
if (document.querySelector(bannerSelector)) {
observer.disconnect();
resolve();
}
});
observer.observe(document.documentElement, { childList: true, subtree: true });
});
}
return html2canvas(target, {
ignoreElements: (element) => element.matches(bannerSelector),
});
}
const canvas = await capturePage({
target: document.querySelector('#article'),
bannerSelector: '#consent-manager',
});
canvas.toBlob((blob) => {
if (!blob) throw new Error('The canvas could not be encoded');
// Upload or download blob here.
}, 'image/png');Use a mutation observer only when the component truly appears later; disconnect it as soon as the condition is met. In production, also handle a page where no banner appears, so a capture is not left waiting forever.
Troubleshooting
The banner still appears
- Confirm the selector matches the outer wrapper in the live DOM, not a shadowed class from another component.
- Check that capture starts after the consent component is inserted.
- With
onclone, inspect the cloned document and verify the callback runs before rendering. - Ensure the banner is not actually a cross-origin iframe.
Other content disappears
Your predicate is too broad. Replace tag-name or generic class checks with a banner-specific selector and test it against representative pages.
The live page changes unexpectedly
Use onclone for capture-only edits. Directly removing the banner before calling html2canvas changes the source document and can affect consent behavior or layout for the visitor.
Free tools Windows power users keep installed
One-click scans. No signup required.
The output differs from the browser
This is a rendering limitation, not necessarily a cookie-selector failure. Check unsupported styling, cross-origin assets, font loading, animations, and the target viewport. html2canvas reconstructs from DOM data rather than taking a native pixel screenshot.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
The screenshot is blank or incomplete
Verify that the target element exists, images and fonts have loaded, and the capture is not running during a navigation or layout transition. Reduce the target to a smaller element to isolate a problematic descendant.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you need a URL screenshot rather than a canvas assembled in your page, ScreenshotNeo makes one request and returns PNG, JPEG, WebP, or PDF. It accepts cookie and consent banners before capture, removes more than 60 known consent platforms plus newsletter popups and chat widgets, and lets you turn each cleanup step off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing result.
See the ScreenshotNeo API documentation for all options, including full-page lazy-image loading, CSS-selector element capture, device and viewport presets, retina scale, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture, usage reporting, and the OpenAPI specification.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const buffer = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', buffer));ScreenshotNeo includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000, and every feature is available on every plan. Create a free ScreenshotNeo account.
FAQ
Does ignoring a banner record consent?
No. These options control rendering only. They do not click an accept button or change your site’s consent state.
Can I use several banner selectors?
Yes. Match a short list of verified, banner-specific selectors in one predicate or remove each known wrapper in onclone.
Will data-html2canvas-ignore work on a child element?
It will skip the marked element, but placing it on the banner’s outer container is the reliable way to exclude the complete consent UI.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Which approach is easiest to audit?
The attribute is easiest when you own the markup. Use the predicate or clone callback when ownership or capture-specific behavior requires JavaScript.
Frequently Asked Questions
Does ignoring a banner record consent?
No. These options control rendering only. They do not click an accept button or change your site’s consent state.
Can I use several banner selectors?
Yes. Match a short list of verified, banner-specific selectors in one predicate or remove each known wrapper in onclone.
Will data-html2canvas-ignore work on a child element?
It will skip the marked element, but placing it on the banner’s outer container is the reliable way to exclude the complete consent UI.
Which approach is easiest to audit?
The attribute is easiest when you own the markup. Use the predicate or clone callback when ownership or capture-specific behavior requires JavaScript.
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.
