}.
*/
async defineExports(context) { return {}; },
/** Runs ONCE after the FIRST export finishes (cleanup). */
async afterSnap(context) {}
};
}
```
--------------------------------
### Exporter-specific Options
Source: https://snapdom.dev/docs/api
Configuration options for specific export methods like download and toBlob.
```APIDOC
## Exporter Options
### download(options)
- **filename** (string) - Optional - Download name (default: 'snapdom').
- **format** (string) - Optional - Output format ('png', 'jpeg', 'jpg', 'webp', 'svg') (default: 'png').
### toBlob(options)
- **type** (string) - Optional - Blob type ('svg', 'png', 'jpeg', 'jpg', 'webp') (default: 'svg').
```
--------------------------------
### Capture DOM element to PNG
Source: https://snapdom.dev/docs
Use the toPng shortcut method for a single-line capture of a DOM element to a PNG image.
```javascript
import { snapdom } from '@zumer/snapdom';
const img = await snapdom.toPng(document.querySelector('#card'));
document.body.appendChild(img);
```
--------------------------------
### Configure outerTransforms and outerShadows
Source: https://snapdom.dev/docs/options
Use these options to control whether external transforms are preserved and if shadow-related visual effects are included in the bounding box.
```javascript
// outerTransforms and remove shadow bleed
await snapdom.toSvg(el, { outerTransforms: true, outerShadows: true });
```
--------------------------------
### Implement overlay filter plugin
Source: https://snapdom.dev/docs/plugins
Defines a plugin that injects a full-size div overlay into the cloned root element.
```javascript
/**
* Ultra-simple overlay filter for SnapDOM (HTML-only).
* Inserts a full-size overlay on the cloned root.
*
* @param {{ color?: string; blur?: number }} [options]
* color: overlay color (rgba/hex/hsl). Default: 'rgba(0,0,0,0.25)'
* blur: optional blur in px (default: 0)
*/
export function overlayFilterPlugin(options = {}) {
const color = options.color ?? 'rgba(0,0,0,0.25)';
const blur = Math.max(0, options.blur ?? 0);
return {
name: 'overlay-filter',
/**
* Add a full-coverage overlay to the cloned HTML root.
* @param {any} context
*/
async afterClone(context) {
const root = context.clone;
if (!(root instanceof HTMLElement)) return; // HTML-only
// Ensure containing block so absolute overlay anchors to the root
if (getComputedStyle(root).position === 'static') {
root.style.position = 'relative';
}
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.left = '0';
overlay.style.top = '0';
overlay.style.right = '0';
overlay.style.bottom = '0';
overlay.style.background = color;
overlay.style.pointerEvents = 'none';
if (blur) overlay.style.filter = `blur(${blur}px)`;
root.appendChild(overlay);
}
};
}
```
--------------------------------
### reconcile
Source: https://snapdom.dev/docs/options
Enables a secondary layout pass to ensure accurate measurement of elements that may re-wrap.
```APIDOC
## reconcile
### Description
When enabled, SnapDOM mounts the styled clone off-screen to measure nodes against their live counterparts, pinning width and height only on boxes that diverge. This ensures accuracy for elements like inline text or table cells at the cost of increased capture time.
### Options
- **reconcile: true** - Enables measurement-based layout reconciliation.
- **reconcile: false** (default) - Uses heuristic-based layout.
```
--------------------------------
### Configure CORS Proxy
Source: https://snapdom.dev/docs/options
Set a proxy prefix URL to handle assets that are blocked by CORS policies. The proxy is only utilized as a fallback when direct or anonymous access fails.
```javascript
await snapdom.toPng(el, {
useProxy: 'https://proxy.corsfix.com/?' // Note: Any cors proxy could be used 'https://proxy.corsfix.com/?'
});
```
--------------------------------
### Enable layout reconciliation
Source: https://snapdom.dev/docs/options
Use reconcile to ensure accurate width and height measurements for elements that may re-wrap due to font metric differences, at the cost of a second layout pass.
```javascript
await snapdom.toPng(el, { reconcile: true });
```
--------------------------------
### defineExports(context)
Source: https://snapdom.dev/docs/plugins
Defines custom export methods within a plugin, which are then exposed on the capture result.
```APIDOC
## defineExports(context)
### Description
Allows plugins to add new export formats. For each key returned (e.g., 'pdf'), SnapDOM automatically exposes a corresponding helper method (e.g., 'toPdf()') on the capture result object.
### Parameters
- **context** (Object) - Required - The context object containing capture state and configuration.
```
--------------------------------
### Configure Image Compression
Source: https://snapdom.dev/docs/options
Controls whether oversized raster images are downsampled to their visible resolution to improve performance and reduce output size.
```javascript
// default: images downsampled to visible resolution
await snapdom.toPng(el);
// keep images at full resolution
await snapdom.toPng(el, { compress: false });
```
--------------------------------
### Reusable DOM capture
Source: https://snapdom.dev/docs
Perform a single clone of a DOM element to generate multiple export formats or trigger downloads efficiently.
```javascript
const result = await snapdom(document.querySelector('#card'));
await result.toPng(); // → HTMLImageElement
await result.toSvg(); // → SVG as Image
await result.download({ format: 'jpg', filename: 'card.jpg' });
```
--------------------------------
### Enable burst mode for dashboard polling
Source: https://snapdom.dev/docs/options
Use burst: true to memoize captures during repeated polling. The pipeline is skipped unless the element or document styles are mutated.
```javascript
// Dashboard polling: only the first and the 3rd (mutated) calls do real work.
for (let i = 0; i < 10; i++) {
if (i === 3) counter.textContent = 'new value';
const result = await snapdom(el, { burst: true });
img.src = (await result.toPng()).src;
}
```
--------------------------------
### Define custom icon font families
Source: https://snapdom.dev/docs/options
Register custom icon font names or regex patterns to ensure they are always embedded.
```javascript
await snapdom.toPng(el, {
iconFonts: ['MyIcons', /^(Remix|Feather) Icons?$/i]
});
```
--------------------------------
### Calling a custom export method
Source: https://snapdom.dev/docs/plugins
Custom exports defined in a plugin are accessible as helper methods on the capture result object, such as toPdf().
```javascript
const out = await snapdom(document.querySelector('#report'));
// because the plugin returns { pdf: async (ctx, opts) => ... }
const pdfBlob = await out.toPdf({
// exporter-specific options (width, height, quality, filename, etc.)
});
```
--------------------------------
### Enable Debug Mode
Source: https://snapdom.dev/docs/options
Enables logging of suppressed errors to console.warn for troubleshooting capture issues.
```javascript
await snapdom.toPng(el, { debug: true });
```
--------------------------------
### debug
Source: https://snapdom.dev/docs/options
Enables logging of normally suppressed errors to console.warn for troubleshooting purposes.
```APIDOC
## debug
### Description
When `debug: true`, SnapDOM logs normally suppressed errors to `console.warn` (with the `[snapdom]` prefix). Useful for troubleshooting capture issues without noisy output in production.
### Usage
```javascript
await snapdom.toPng(el, { debug: true });
```
```
--------------------------------
### compress
Source: https://snapdom.dev/docs/options
Controls whether oversized raster images are downsampled to their visible resolution to improve performance and reduce output size.
```APIDOC
## compress
### Description
With `compress` (on by default) SnapDOM downsamples each oversized raster to the resolution actually visible, preserving aspect ratio and never upscaling. This improves performance for raster exports and reduces file size for SVG exports.
### Usage
```javascript
// default: images downsampled to visible resolution
await snapdom.toPng(el);
// keep images at full resolution
await snapdom.toPng(el, { compress: false });
```
```
--------------------------------
### outerShadows
Source: https://snapdom.dev/docs/options
Controls the inclusion of shadows, blurs, and outlines in the captured bounding box.
```APIDOC
## outerShadows
### Description
Determines if the bounding box expands for shadows, blur, or outlines. Setting to false strips box-shadow, text-shadow, filters, and outlines.
### Options
- **outerShadows: false** (default) - Prevents expanding the bounding box and strips visual effects.
```
--------------------------------
### Define plugin hook logic
Source: https://snapdom.dev/docs/plugins
Basic structure for a plugin hook function.
```javascript
export function myPlugin() {}
```
--------------------------------
### Exclude specific non-icon fonts
Source: https://snapdom.dev/docs/options
Skip font families or unicode-range subsets to optimize capture performance.
```javascript
await snapdom.toPng(el, {
embedFonts: true,
excludeFonts: {
families: ['Noto Serif', 'SomeHeavyFont'], // skip by family name
subsets: ['cyrillic-ext'] // skip by unicode-range subset tag
}
});
```
--------------------------------
### SnapDOM result object interface
Source: https://snapdom.dev/docs/api
The interface definition for the object returned by the snapdom(el) function.
```typescript
{
url: string;
toRaw(): string;
toImg(): Promise; // deprecated
toSvg(): Promise;
toCanvas(): Promise;
toBlob(options?): Promise;
toPng(options?): Promise;
toJpg(options?): Promise;
toWebp(options?): Promise;
download(options?): Promise;
}
```
--------------------------------
### Filter elements using a predicate function
Source: https://snapdom.dev/docs/options
Use a custom function to determine which elements to keep or drop based on computed styles.
```javascript
/**
* Example filter: skip elements with display:none
* @param {Element} el
* @returns {boolean} true = keep, false = exclude
*/
function filterHidden(el) {
const cs = window.getComputedStyle(el);
if (cs.display === 'none') return false;
return true;
}
await snapdom.toPng(document.body, { filter: filterHidden });
```
--------------------------------
### Exclude elements by CSS selector
Source: https://snapdom.dev/docs/options
Remove specific elements like banners or tooltips from the captured output using selectors.
```javascript
await snapdom.toPng(el, {
exclude: ['.cookie-banner', '.tooltip', '[data-test="debug"]']
});
```
--------------------------------
### outerTransforms
Source: https://snapdom.dev/docs/options
Controls whether external transforms (rotation, translation) are preserved in the captured output.
```APIDOC
## outerTransforms
### Description
Determines if external transforms applied to elements are kept or stripped. Setting to false results in a flat, upright output.
### Options
- **outerTransforms: true** (default) - Keeps original transforms and rotate.
- **outerTransforms: false** - Eliminates external transforms.
```
--------------------------------
### Force capture invalidation in burst mode
Source: https://snapdom.dev/docs/options
Use invalidate: true to force a fresh capture when changes are made via Canvas or CSSOM that the MutationObserver cannot detect.
```javascript
ctx.fillRect(0, 0, 100, 100); // canvas redraw — invisible to the observer
await snapdom(el, { burst: true, invalidate: true });
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.