snapDOM: Fast & Accurate DOM to Image Capture Library

snapDOM is a JavaScript-driven DOM capture tool that converts any HTML element into a scalable SVG image.

It can be useful when you need to generate image previews of UI components, create visual regression tests, build user feedback tools where users screenshot parts of the page, or dynamically generate images from HTML templates on the client side.

Features

• Exports captured DOM elements to SVG, PNG, JPG, WebP, Canvas, and Blob formats.
• Inlines computed styles, ::before and ::after pseudo-elements, and external background images into the captured output.
• Embeds icon fonts automatically and supports optional embedding of custom web fonts via @font-face detection.
• Captures same-origin iframe content as part of the DOM subtree.
• Renders CSS counter function values accurately in the captured clone.
• Handles multi-line text truncation in captured elements correctly.
• Reusable capture mode: clone once and export to multiple formats at no additional processing cost.
• Selector-based and predicate-based node exclusion on the cloned tree, with configurable hide or remove behavior.
• Four cache modes for controlling resource retention between repeated captures.
• Plugin system with lifecycle hooks at every stage of the capture and export pipeline.
• Optional preloading helper to front-load external resource fetching before the first capture.
• Configurable CORS proxy fallback for cross-origin images and backgrounds.
• Safari-specific warmup logic to address WebKit font decode timing behavior.

See It In Action:

Use Cases

• Generating downloadable social share cards from HTML components rendered in the browser.
• Building export features for invoice or report views that produce formatted DOM output as a PNG or JPG file.
• Producing thumbnail previews of user-created layouts in editor or design tools.
• Capturing rendered chart and data visualization elements for use in PDF generation workflows.

How to use it:

1. Install snapDOM and import it into your project.

# Yarn
$ yarn add @zumer/snapdom
# NPM
$ npm install @zumer/snapdom

import { snapdom } from '@zumer/snapdom';
// or for specific methods
import { toPng, toCanvas } from '@zumer/snapdom';

2. You can also directly import the library into your HTML document:

<!-- Global object 'snapdom' -->
<script src="https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.min.js"></script>
<!-- Or as ES Module -->
<script type="module">
  import { snapdom } from 'https://unpkg.com/@zumer/snapdom@latest/dist/snapdom.mjs';
  window.snapdom = snapdom;
</script>

3. Basic usages.

// Single-format capture using a shortcut method:
import { snapdom } from '@zumer/snapdom';
// Capture the element and receive an HTMLImageElement in PNG format
const img = await snapdom.toPng(document.querySelector('#profile-card'));
// Attach the captured image to the page
document.body.appendChild(img);
// Reusable capture — clone once, export many times:
import { snapdom } from '@zumer/snapdom';
const el = document.querySelector('#invoice-preview');
// Clone the element once; subsequent exports reuse this clone
const capture = await snapdom(el);
// Export as PNG
const pngImg = await capture.toPng();
document.body.appendChild(pngImg);
// Export as SVG from the same clone
const svgImg = await capture.toSvg();
document.body.appendChild(svgImg);
// Trigger a JPG download using the same clone
await capture.download({ format: 'jpg', filename: 'invoice-export' });
// Export to canvas:
// Returns an HTMLCanvasElement, ready for further 2D drawing operations
const canvas = await snapdom.toCanvas(document.querySelector('#chart-widget'));
document.querySelector('#canvas-mount').appendChild(canvas);
// Export to Blob (useful for FormData uploads or object URLs):
// Retrieve a JPEG Blob with 0.88 quality
const blob = await snapdom.toBlob(document.querySelector('#summary-panel'), {
  type: 'jpeg',
  quality: 0.88
});
// Create a temporary URL for preview or upload
const objectUrl = URL.createObjectURL(blob);
// Download directly from a reusable capture:
const capture = await snapdom(document.querySelector('#dashboard-widget'));
// Output as WebP and trigger a browser file download
await capture.download({
  format: 'webp',
  filename: 'dashboard-export',
  quality: 0.92
});

4. Available API methods.

// Clone the element and return a result object with multiple export methods
const result = await snapdom(element, options);
// Return the raw SVG data URL string
const dataUrl = result.toRaw();
// Export as an SVG HTMLImageElement
const svgImg = await result.toSvg();
// Export as a PNG HTMLImageElement
const pngImg = await result.toPng();
// Export as a JPG HTMLImageElement
const jpgImg = await result.toJpg();
// Export as a WebP HTMLImageElement
const webpImg = await result.toWebp();
// Return an HTMLCanvasElement
const canvas = await result.toCanvas();
// Return a Blob (defaults to SVG; pass { type: 'jpeg' } for raster output)
const blob = await result.toBlob({ type: 'jpeg', quality: 0.9 });
// Trigger a browser file download
await result.download({ format: 'webp', filename: 'my-export' });
// Capture and return an SVG HTMLImageElement in one step
const svgEl = await snapdom.toSvg(element, options);
// Capture and return a PNG HTMLImageElement
const pngEl = await snapdom.toPng(element, options);
// Capture and return a JPG HTMLImageElement
const jpgEl = await snapdom.toJpg(element, options);
// Capture and return a WebP HTMLImageElement
const webpEl = await snapdom.toWebp(element, options);
// Capture and return an HTMLCanvasElement
const canvasEl = await snapdom.toCanvas(element, options);
// Capture and return a Blob
// Option: type: "svg" | "png" | "jpeg" | "jpg" | "webp", default "svg"
const blobObj = await snapdom.toBlob(element, options);
// Capture and trigger a browser file download
await snapdom.download(element, options);

5. Available Capture options.

• debug (boolean, default false): Logs suppressed internal errors to console.warn under a [snapdom] prefix. Use this during development to surface canvas failures, style resolution issues, or blob errors.
• fast (boolean, default true): Skips small idle delays between capture stages. Set to false in environments where rendering timing is unpredictable.
• embedFonts (boolean, default false): Inlines non-icon @font-face rules detected as used within the captured subtree. SnapDOM always embeds icon fonts (Font Awesome, Material Icons, etc.) regardless of this setting.
• localFonts (array, default []): Declares locally served fonts as { family, src, weight?, style? } objects. SnapDOM uses these directly and skips CSS discovery for those families.
• iconFonts (string | RegExp | Array, default []): Registers additional icon font family matchers for private or non-standard icon sets that SnapDOM does not detect automatically.
• excludeFonts (object, default {}): Skips specific non-icon fonts during embedding. Accepts families (array of family name strings), domains (array of host substrings matched against the resolved URL), and subsets (array of unicode-range subset tags). This option has no effect on icon fonts.
• scale (number, default 1): Output scale multiplier. Takes precedence over width and height when set.
• dpr (number, default devicePixelRatio): Device pixel ratio for the capture output.
• width (number): Forces output width. Height scales proportionally when height is not set.
• height (number): Forces output height. Width scales proportionally when width is not set. Providing both forces an exact size and may distort the output.
• backgroundColor (string, default "#fff"): Fallback background color for JPG and WebP exports, which have no alpha channel.
• quality (number, default 1): Output quality for JPG and WebP, as a value from 0 to 1.
• useProxy (string, default ""): A proxy base URL for CORS fallbacks. SnapDOM appends the original asset URL to this prefix. The proxy applies only to assets that fail standard CORS checks.
• exclude (string[]): CSS selectors identifying nodes to exclude from the cloned tree.
• excludeMode ("hide" | "remove", default "hide"): Controls how excluded nodes are handled. "hide" applies visibility:hidden and preserves the original layout. "remove" omits the node from the clone entirely.
• filter (function): A custom predicate (el) => boolean. Return false to exclude a node.
• filterMode ("hide" | "remove", default "hide"): Controls how filtered nodes are handled, with the same behavior as excludeMode.
• cache (string, default "soft"): Cache strategy between captures. Accepts "disabled", "soft", "auto", and "full".
• placeholders (boolean, default true): Shows placeholder blocks for images and CORS-blocked iframes that SnapDOM cannot fetch.
• fallbackURL (string | function): Fallback image for <img> elements that fail to load. Accepts a fixed URL string or a callback ({ width, height }) => string for dynamic placeholders.
• outerTransforms (boolean, default true): When false, strips translate and rotate transforms from the root element. The output is flat and upright. scale and skew remain in place.
• outerShadows (boolean, default false): When true, expands the bounding box to include box-shadow, filter: drop-shadow(), and outline on the root element. The default behavior strips those effects from the cloned root.
• safariWarmupAttempts (number, default 3): Safari only. Sets the number of pre-capture iterations SnapDOM runs to prime WebKit’s font decode pipeline (WebKit bug #219770). Reduce to 1 if the default causes visible lag.

// Example — embed fonts and use a CORS proxy:
import { snapdom } from '@zumer/snapdom';
const result = await snapdom(document.querySelector('#report-section'), {
  embedFonts: true,
  // Declare self-hosted fonts so SnapDOM skips network discovery
  localFonts: [
    { family: 'Roboto', src: '/assets/fonts/Roboto-Regular.woff2', weight: 400 }
  ],
  // Apply proxy only to CORS-blocked assets
  useProxy: 'https://proxy.corsfix.com/?',
  scale: 2,
  backgroundColor: '#f8f8f8'
});
const img = await result.toPng();
document.body.appendChild(img);
// Example — exclude nodes by selector and filter predicate:
// Remove debug panels from the clone and drop hidden elements
await snapdom.toPng(document.querySelector('#user-profile'), {
  exclude: ['.dev-overlay', '[data-env="debug"]'],
  excludeMode: 'remove',
  filter(el) {
    // Return false for elements the browser has hidden from the computed layout
    return window.getComputedStyle(el).display !== 'none';
  }
});
// Example — fallback image for broken img elements:
// Supply a dynamic placeholder when an image fails to load
await snapdom.toSvg(document.querySelector('#content-card'), {
  fallbackURL: ({ width = 300, height = 150 }) =>
    `https://placehold.co/${width}x${height}/cccccc/666666`
});
// Example — strip outer transforms for a flat, upright export:
// Produce a minimal bounding box with no transform or shadow bleed
await snapdom.toSvg(document.querySelector('#rotated-badge'), {
  outerTransforms: false,
  outerShadows: false
});
// Example — exclude specific font families and domains during embedding:
await snapdom.toPng(document.querySelector('#article-preview'), {
  embedFonts: true,
  excludeFonts: {
    families: ['Noto Serif', 'HeavyDisplayFont'],   // Skip by family name
    domains: ['fonts.gstatic.com'],                  // Skip by source host
    subsets: ['cyrillic-ext']                        // Skip by unicode-range tag
  }
});

6. SnapDOM maintains internal caches for images, backgrounds, styles, and fonts. The cache option controls how those caches clear between captures.

• "disabled": No caching. Every capture fetches and processes all resources fresh.
• "soft" (default): Clears session caches (styleMap, nodeMap, styleCache) between captures.
• "auto": Minimal cleanup. Clears only transient maps and retains heavier resource caches.
• "full": Retains all caches between captures. Best for repeated captures of the same or similar elements.

// Retain all caches for maximum performance across repeated captures
await snapdom.toPng(document.querySelector('#live-preview'), { cache: 'full' });
// Clear everything on every capture for isolated, accurate first-renders
await snapdom.toPng(document.querySelector('#live-preview'), { cache: 'disabled' });
// Minimal cleanup — a good middle ground for high-frequency capture loops
await snapdom.toPng(document.querySelector('#live-preview'), { cache: 'auto' });

7. preCache() front-loads the fetching of external images, backgrounds, and fonts before the first capture. It prevents stalls on complex or asset-heavy DOM trees.

import { preCache } from '@zumer/snapdom';
// Pre-fetch all external resources for the app shell before any capture runs
await preCache({
  root: document.querySelector('#app-root'),
  embedFonts: true,
  localFonts: [
    { family: 'Inter', src: '/fonts/Inter-Variable.woff2', weight: 400 }
  ],
  useProxy: 'https://proxy.corsfix.com/?'
});

8. SnapDOM’s plugin system intercepts the capture pipeline at named lifecycle hooks. Plugins can modify the cloned tree, adjust options before processing, transform export results, or add new export methods to the result object.

Official plugins (via @zumer/snapdom-plugins):

• picture-resolver: Resolves lazy-loaded <picture> elements by fetching the real image before capture.
• timestamp-overlay: Injects a configurable timestamp label onto the captured clone.
• filter: Applies CSS filter effects to captures. Ships with grayscale, sepia, blur, vintage, and dramatic presets.
• replace-text: Performs find-and-replace on text nodes in the cloned tree, with string and regex support.
• color-tint: Overlays a configurable tint color on the capture using mix-blend-mode.
• ascii-export: Adds a toAscii() method that converts captures to ASCII art with configurable width and charset.
• pdf-image: Exports the capture as a PNG embedded in a downloadable PDF with portrait and landscape support.
• html-in-canvas: Uses the experimental WICG drawElementImage API for direct DOM-to-canvas rendering where the browser supports it.

Install the official plugin package:

npm install @zumer/snapdom-plugins

Register plugins globally (applies to all subsequent captures):

import { snapdom } from '@zumer/snapdom';
import { filter } from '@zumer/snapdom-plugins/filter';
// All captures will apply the grayscale preset from this point forward
snapdom.plugins([filter, { preset: 'grayscale' }]);

Register plugins per capture (applies to one call only):

import { timestampOverlay } from '@zumer/snapdom-plugins/timestamp-overlay';
// Only this specific capture uses the timestamp overlay
const result = await snapdom(document.querySelector('#event-card'), {
  plugins: [[timestampOverlay, { position: 'bottom-right', format: 'YYYY-MM-DD' }]]
});
const img = await result.toPng();
document.body.appendChild(img);

Per-capture plugins execute before globally registered ones. SnapDOM skips duplicate plugin names automatically. A per-capture plugin with the same name takes precedence over its global counterpart.

Writing a custom plugin:

export function auditPlugin(options = {}) {
  return {
    // Unique name used for de-duplication and overrides
    name: 'audit-logger',
    // Runs before any processing; adjust global capture options here
    async beforeSnap(context) {
      context.scale = options.exportScale ?? 2;
    },
    // Runs before the DOM subtree is cloned; use sparingly on the live DOM
    async beforeClone(context) {},
    // Runs after cloning; safe to modify the cloned tree here
    async afterClone(context) {
      // Inject a label badge into the clone — the live DOM stays untouched
      const badge = document.createElement('div');
      badge.textContent = 'Exported';
      badge.style.cssText =
        'position:absolute;top:8px;right:8px;font-size:10px;color:#fff;background:#222;padding:2px 6px;border-radius:4px;';
      context.clone.appendChild(badge);
    },
    // Runs right before SVG serialization
    async beforeRender(context) {},
    // Runs after serialization; inspect context.svgString or context.dataURL here
    async afterRender(context) {},
    // Runs before each export call (toPng, toSvg, toBlob, etc.)
    async beforeExport(context) {},
    // Runs after each export call; return a value to pass it to the next plugin
    async afterExport(context, result) {
      console.log('Export format:', context.export.type);
      return result;
    },
    // Define custom export methods exposed on the result object (e.g., out.toReport())
    async defineExports(context) {
      return {
        report: async (ctx, opts) => {
          // Custom export logic here; return any value
          return ctx.dataURL;
        }
      };
    },
    // Runs once after the first export completes; use for cleanup
    async afterSnap(context) {}
  };
}

Calling a custom exporter added by a plugin:

// Register the plugin globally so all captures have access to it
snapdom.plugins(auditPlugin({ exportScale: 3 }));
// Call the custom exporter that the plugin defined via defineExports()
const result = await snapdom(document.querySelector('#report-widget'));
const reportData = await result.toReport();

Best Practices & Performance:

Font Loading: snapDOM automatically waits for document.fonts.ready. Ensure your fonts are loaded before initiating the capture if you rely on custom web fonts. If fonts load after the capture starts, they might not render correctly.

CORS: External images (e.g., <img> tags with src pointing to another domain) must be served with permissive CORS headers (Access-Control-Allow-Origin). The browser’s security rules prevent canvas/SVG tainting otherwise. snapDOM tries to fetch and inline these as Data URLs. If it fails due to CORS, the image might be missing.

Complexity: While fast, capturing extremely large or complex DOM trees (thousands of nodes deep) will naturally take longer. Consider capturing smaller, more targeted elements if performance is critical on massive pages.

SVG vs. Raster: SVG output is generally preferred for fidelity and scalability. Use PNG/JPG/WebP mainly when you need a specific raster format or transparency isn’t desired (JPG). SVG captures can sometimes result in larger file sizes if they contain many embedded raster images.

Compared to Alternatives

FAQs

Q: Why are images from another domain not showing up?

A: This is almost certainly a CORS issue. The server hosting the external image needs to send Access-Control-Allow-Origin headers that permit your site to fetch the image data. Without it, the browser blocks access, and snapDOM can’t inline the image. Check your browser’s console for CORS errors.

Q: My custom web fonts look wrong in the capture.

A: Make sure the font is fully loaded before you call snapdom. snapDOM waits for document.fonts.ready, but if you trigger the capture during font loading, it might capture before the font is applied. Use CSS font-display: block; initially or explicitly await your font loading promises if needed.

Q: Can it capture content inside an <iframe>?

A: No, snapDOM doesn’t capture iframe content due to browser security restrictions (cross-origin limitations). It captures the <iframe> element itself, but not its internal document.

Q: How does scaling work? Does scale: 2 make it twice as slow?

A: The scale option increases the dimensions of the output SVG/Canvas. It might increase processing time slightly, but usually not dramatically like 2x slower. It’s useful for getting higher-resolution PNG/JPG outputs from the intermediate canvas stage. For SVG, it mainly affects the viewBox and width/height attributes.

Q: What’s the difference between snapdom() and snapdom.toImg()?

snapdom() returns a Promise<string> containing the SVG Data URL. snapdom.toImg() returns a Promise<HTMLImageElement> where the src attribute is set to that SVG Data URL. toImg is just a convenience wrapper if you immediately want an <img> tag.

Q: Is there a size limit to what it can capture?

A: There’s no hardcoded limit, but extremely large and complex DOM structures will consume more memory and CPU during capture. Browser limitations on memory or rendering extremely large SVGs/Canvases could theoretically be hit in extreme edge cases, but for typical web pages and components, it should be fine. The performance benchmarks show it handles very large dimensions well compared to others.

Changelog:

v2.12.0 (05/05/2026)

• Bugfixes

v2.9.0 (04/23/2026)

• Bugfixes

v2.8.0 (04/09/2026)

• Improve robustness of icon font detection

v2.7.0 (03/27/2026)

• feat(plugins): add multiple new SnapDOM plugins including ascii-export, color-tint, filter, html-in-canvas, pdf-image, picture-resolver, replace-text, timestamp-overlay. Each plugin enhances image processing and manipulation capabilities.
• feat(plugin-template): add initial SnapDOM plugin template with example usage and options.

v2.6.0 (03/23/2026)

• bugfixes

v2.5.0 (03/17/2026)

• fix: CSS vars perf, scrollbar styles, SVG image inline, nested line-clamp, iframe pseudos & isolation, Tailwind border.
• fix: enable image download on iOS via Web Share API.
• feat(scrollbar): implement custom scrollbar style collection for capture, ensuring styles are applied correctly.
• feat(styles): normalize Tailwind border styles in capture and inlineAllStyles to ensure consistent output.
• feat(lineClamp): introduce lineClampTree function to apply line-clamp to nested elements, enhancing ellipsis rendering.
• test(styles): add tests for excluding CSS properties from snapshots, ensuring fidelity with CSS variables.
• test(capture): add test for iframe CSS isolation to ensure wrapper div does not inherit iframe styles.
• refactor(capture): replace getComputedStyle with getStyle for improved iframe support and consistency across style retrieval.
• feat(pseudo): implement suppression of native ::before/::after pseudo-elements in cloned styles to prevent double rendering.
• fix(capture): update Safari padding logic to avoid edge clipping by applying padding only when necessary based on bounding box transforms.
• test(fonts): add test for cross-origin CSS support in embedCustomFonts function, verifying correct handling of custom CDN stylesheets.
• feat(fonts): add fontStylesheetDomains option to support cross-origin CSS fetching, enhancing font loading capabilities.
• feat(styles): add support for capturing -webkit-text-stroke properties in Safari to enhance style snapshot accuracy.
• fix(styles): normalize inline styles to ensure !important rules in stylesheets correctly override inline styles in clones.
• refactor: improve dimension handling in deepClone and createCheckboxRadioReplacement functions for better accuracy and consistency.
• refactor: enhance checkbox/radio replacement for Firefox with SVG implementation for consistent rendering and improved styling.
• fix(background): resolve relative URLs and fallback to background shorthand for url() when background-image is empty.
• fix: enable image download on iOS via Web Share API.
• feat(tests): add comprehensive test coverage for various modules including exporters, utils, and modules to improve overall code reliability.
• feat(debug): introduce debug option to log suppressed errors for troubleshooting, enhancing error visibility during capture processes.
• fix: Firefox checkbox radio replacement.
• refactor(cache): implement EvictingMap for cache management to limit memory usage and improve performance.
• refactor(styles): improve height handling for transparent wrappers to support margin collapsing and enhance layout stability.
• fix(styles): prevent overriding border styles when using border-image, and improve getStyle fallback handling.
• feat(images): add support for inlining SVG <image> elements as data URLs.
• feat(safari): implement font and image decode warmup for Safari to address WebKit Bug #219770, enhancing capture reliability.
• test(getStyle): add tests to ensure getStyle never returns undefined for elements and pseudo-elements.
• refactor(snapdom): streamline plugin exports by consolidating export functions into a loop for improved maintainability.
• feat(capture): enhance DOM capture dimensions for root elements by measuring scroll dimensions and using a temporary container for accurate height and width calculations.
• fix(css): enhance getWindowForElement and getStyle functions to handle cross-document scenarios and improve fallback logic.
• refactor(context): remove inline cache policy normalization and import from cache module for improved code organization.
• feat(safari): add safariWarmupAttempts option to optimize font and image decoding for improved capture performance.
• fix(styles): prevent width constraints on inline and specific tags to avoid text wrapping issues.
• docs: update README files to replace NPM version badge with weekly downloads badge.
• chore(.gitignore): add ‘demos/’ directory to .gitignore to exclude demo files from version control.
• refactor(prepare): simplify deepClone call by removing redundant element argument for cleaner code.
• fix(styles): adjust inline style for timestamp demo to prevent text wrapping.
• fix(snapdom): remove redundant safariWarmup reset to improve iteration logic.
• enable image download on iOS via Web Share API.

v2.1.0 (03/10/2026)

• fix: use nodeMap for source-clone alignment in inlinePseudoElements
• Update URL handling to use location.origin in fonts.js
• fix(background): inline background-image inside shadow DOM hosts
• feat: classify open issues by importance with priority labels and automated triage
• fix: CSS transform double scale bug
• fix: dynamic injected stylesheets with fonts
• Fix: Inherit root font-size in SVG output

v2.0.2 (01/28/2026)

• bugfix

v2.0.1 (11/26/2025)

• bugfix

v2.0.0 (11/19/2025)

• fix: improve CSS src property parsing in font faces
• Fix placeholder dimensions when image loading fails

v1.9.13 (10/05/2025)

• Adding ‘exclusionMode’ option
• Refactor: use BlobType alias consistently
• Improve CSS vars detection
• Fix toImg() dimensions when scale==1
• Enhance web fonts detection on deph relative paths
• Add two new options to control transforms and shadows on root element
• Add toSvg() in replacement of toImg()
• Improve relative path detection

v1.9.11 (09/10/2025)

• Fix Safari bug that prevents capture

v1.9.10 (08/14/2025)

• feat: fast configuration item to control deep recursion of deepClone
• Fix the issue when image loading fails and add a default image placeholder attribute

v1.9.9 (08/14/2025)

• Improves external fonts handling.
• Handles srcset.
• Fix speed regression.
• Handles Blob src.

v1.9.8 (08/09/2025)

• fix: invalid border-width check
• fix(types): update preCache

v1.9.7 (07/27/2025)

• Improve pseudo elements detection.
• Remove default backgroundColor on download().
• Bugfixes

v1.9.6 (07/20/2025)

• Add options argument to toBlob function
• Keep canvas CSS style
• Improve: handles local() source font
• Improve webcomponent clone
• Perf: unifies cache
• Improve cache handling
• Adjust cache reset
• Improve regex
• Add primitive support to css counter
• Fix bug background-color on export formats
• Fix regression textArea duplication
• Prevent process local ids

v1.9.5 (07/14/2025)

• copy checkbox.indeterminate
• update docs to show exclude and filter
• fix: add type def for SnapOptions
• dd slot detection and Fix textarea content duplication

v1.9.3 (07/10/2025)

• Add filter and exclude options for element exclusion.
• Missing width and height in types.
• fix: type check.
• Core update: Capture speed is drammatically increased.
• Core update: tries differents methods to fetch image, even proxy for CORS denied images. Important: crossOrigin is now inbuilt into fetchImages(), no longer needed as option.
• Improve fetchImage() by skiping svg format.
• Add iconFont options and fix doubled icon render.
• Add Layui icon font.
• Add Blob Types.
• Bug: fixes hidden last line PRE tag.
• Feat: handles external SVG defs.
• Prevents double url encoding.
• Fix scale background-image

v1.8.1 (06/30/2025)

• Add Lucide to icon font detection
• Fix: encode same uri multiple times
• Avoid background-image logic duplication
• Improve split multiple backgrounds
• Fix background image handling
• Feat: sanitize rootElement to avoid CSS layout conflicts
• Clean transform RootElement prop
• Fix: canvas style props
• Feat: handling @import and optimice cache
• Compile .js to es2015
• Improve inlinePseudoElements() to handle decorative properties
• Add ::first-letter detection

v1.7.0 (06/19/2025)

• add options.crossOrigin
• Improve inlineBackgroundImages to support multiple background-image values

v1.3.0 (06/14/2025)

• Fix: double scaled images
• Fix: background img & img base64 in pseudo elements
• Feat: captures input values
• Improve: Device Pixel Ratio handling

v1.2.5 (06/09/2025)

• Bugfixes

v1.2.2 (06/04/2025)

• Patch: type script definitions

v1.2.1 (05/31/2025)

• Feat(embedFonts): also embed icon fonts when embedFonts is true
• Fix expose snapdom and preCache on browser compilation
• Improve icon-font conversion
• Fix compress mode

v1.1.0 (05/28/2025)

• Add typescript declaration
• Feat. support scrolling state
• Fix bug by removing trim spaces
• Fix bug that prevents scale on png format

v1.0.0 (05/19/2025)

• Fix retina and scale bug
• Improve public API
• Fix bug to render canvas with precache compress mode
• Update to reflect new public API
• Add helper to check Safari

v0.9.9 (05/16/2025)

• Fix bug on collectUsedTagNames()

v0.9.8 (05/14/2025)

• Fix a bug in capture output format

v0.9.7 (05/14/2025)

• Add an option to switch between smooth and fast capture
• Improve detection of browsers default css styles
• Size of generated image is smaller in compress mode
• Enable embedding fonts
• Enable a pre caching for static assets (WIP)