求助：dom-to-image库无法捕获字体图标，该如何解决？

Hey there, I’ve dealt with this exact font icon capture issue with dom-to-image a bunch of times—let’s walk through the most effective fixes to get those icons showing up in your screenshots:

1. Inline Your Icon Font as Base64 #

Dom-to-image often struggles with external font files, especially if they’re loaded from a different domain or haven’t finished loading. The most reliable fix here is to convert your font file to a base64 data URI and inline it directly in your CSS. This removes any dependency on external font loading.

Here’s how to update your @font-face rule:

@font-face {
  font-family: 'YourIconFontName';
  src: url(data:application/font-woff2;charset=utf-8;base64,<<YOUR_FONT_BASE64_STRING>>) format('woff2');
  font-weight: normal;
  font-style: normal;
}

You can convert your .woff2 (or other font format) file to base64 using any free online tool—just paste the resulting string in place of <<YOUR_FONT_BASE64_STRING>>.

2. Wait for Fonts to Fully Load Before Screenshotting #

Sometimes dom-to-image runs before your icon fonts have finished loading, resulting in missing icons. Use the browser’s document.fonts.ready promise to ensure all fonts are loaded before triggering the screenshot:

// Wait for all fonts to load
document.fonts.ready.then(() => {
  domtoImage.toPng(node)
    .then(basicStr => {
      console.log(basicStr);
    })
    .catch(error => {
      console.error('Screenshot failed:', error);
    });
});

This guarantees your icon fonts are available when dom-to-image renders the node.

3. Replace Font Icons with SVG Elements #

If your icon set has SVG equivalents, swapping out font-based icons for inline SVGs eliminates font-related issues entirely—dom-to-image handles SVG rendering flawlessly.

For example, replace a font icon tag like:

<i class="icon-user"></i>

With its inline SVG counterpart:

<svg class="icon-user" viewBox="0 0 24 24" width="24" height="24">
  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
</svg>

Most icon libraries (like Font Awesome) provide SVG versions of their icons, so this is usually a straightforward swap.

4. Fix Cross-Origin Font Restrictions #

If your icon fonts are loaded from a different domain, browser CORS policies might block dom-to-image from accessing them. To fix this:

• Add the Access-Control-Allow-Origin header to your font server’s responses (set it to your domain or * for public access).
• Add the crossorigin="anonymous" attribute to your @font-face rule:

@font-face {
  font-family: 'YourIconFontName';
  src: url('https://your-cdn-domain.com/fonts/iconfont.woff2') format('woff2');
  crossorigin: anonymous;
  font-display: swap;
}

This tells the browser that the font can be accessed cross-origin by dom-to-image.

Start with the first two fixes—they’re the quickest to implement and resolve most font icon capture issues. If those don’t work, try swapping to SVGs or adjusting CORS settings.

内容的提问来源于stack exchange，提问作者jeeva jeeva