Add option to filter stylesheets by origin to prevent CORS errors

[RicSala]

Expected Behavior

The library should provide an option to filter or exclude specific stylesheets by origin/URL when processing fonts, allowing users to skip problematic cross-origin stylesheets while still embedding necessary fonts.

Current Behavior

When converting HTML to images, the library attempts to access all stylesheets in the document, including those from different origins. This causes CORS errors when stylesheets don't have appropriate CORS headers:

SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

The error occurs in the ⁠embed-webfonts.ts file when trying to extract font information from cross-origin stylesheets.

Possible Solution

Add a new option to filter stylesheets by origin:

const dataUrl = await toCanvas(element, {
  // New option to filter stylesheets
  stylesheetFilter: (sheet) => {
    // Skip stylesheets from specific domains
    return !sheet.href || !sheet.href.includes('problematic-domain.com');
  }
});

Steps To Reproduce

1. Include a third-party widget/script in your page that loads its own stylesheet (e.g., a chat widget, analytics tool)

2. Try to convert an element to an image using html-to-image

3. Observe CORS errors in the console

Error Message & Stack Trace

Error while reading CSS rules from https://cdn.example.com/styles.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at embed-webfonts.ts:172:39
    at Array.forEach (<anonymous>)
    at embed-webfonts.ts:169:17
    at async parseWebFontRules (embed-webfonts.ts:200:20)
    at async getWebFontCSS (embed-webfonts.ts:232:17)
    at async embedWebFonts (embed-webfonts.ts:259:9)
    at async toSvg (index.ts:21:3)
    at async toCanvas (index.ts:33:15)

Additional Context

I'm building an application that exports HTML elements as PDFs. The app uses Google Fonts for styling but also includes third-party widgets that load their own stylesheets.
Current workarounds include:
• Temporarily disabling problematic stylesheets
 • Using ⁠skipFonts: true (which prevents all font embedding)
 • Complex DOM manipulation
These workarounds are not ideal and a native solution would greatly improve usability.

Your Environment

• OS: macOS
• Browser: chrome

[biiibooo]

👋 @RicSala

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[agcyphers]

+1 Also would like to see this added.