How to Fix domtoimage.toBlob() Failing in Production

For application stylesheets loaded dynamically, wait for the stylesheet’s load event before exporting. If the target is hidden with display: none, it has no usable layout; render it in the document or in an off-screen container with dimensions.

3. Find the resource that breaks the clone

Temporarily replace remote images, CSS background images, web fonts, and external stylesheets with same-origin or inline resources. If the export starts working, restore resources one at a time. This identifies whether the problem is an image, font, stylesheet, or another embedded asset.

const original = node.cloneNode(true);
// Diagnostic experiment only: remove external images from the target.
node.querySelectorAll('img').forEach(img => {
  if (new URL(img.src, location.href).origin !== location.origin) {
    img.removeAttribute('src');
  }
});

try {
  const blob = await domtoimage.toBlob(node);
  console.log('Export succeeds without external images', blob.size);
} finally {
  node.replaceWith(original);
}

Use browser DevTools Network and Console panels while exporting. Look for blocked font or image requests, failed stylesheet fetches, and security errors. A failed content image may be skipped while the rest of the node renders, but final SVG-to-canvas rasterization and a tainted canvas are fatal.

4. Fix CORS at the asset boundary

A canvas becomes tainted when it contains cross-origin image data that was not loaded with permission. Once tainted, the browser blocks toBlob(), toDataURL(), and getImageData(). The MDN CORS-enabled image guidance and HTML Standard describe this origin-clean check.

Server-side headers

Configure the image, font, or stylesheet host to return an appropriate Access-Control-Allow-Origin value for the page origin. If credentials are used, configure the credential mode and response headers consistently; do not combine credentials with a wildcard origin.

Access-Control-Allow-Origin: https://app.example.com
Vary: Origin

Set the matching CORS mode before the resource is requested. For images, that commonly means using an image element configured for anonymous CORS before assigning its source:

const image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://assets.example.com/diagram.png';
await image.decode();

mode: no-cors is not a fix. It produces an opaque response that cannot be used as readable embedded data for a reliable canvas export.

When you cannot change the asset host

• Route the asset through a same-origin server proxy that returns the bytes with appropriate headers.
• Convert the asset to a data URL before handing it to the renderer.
• Use the library’s requestInterceptor to provide a data URL or recover from a failed fetch.

5. Configure dom-to-image recovery hooks

The maintained dom-to-image-more documentation describes these recovery options. Check the exact option names and behavior against the version installed in your project.

The documented order is request interceptor, proxy rewrite, fetch, interceptor recovery, image placeholder, then dropping the resource. A successful HTTP status is not sufficient: a response can still fail when its body is empty, not a Blob, or undecodable.

async function exportWithDiagnostics(node) {
  if (typeof window === 'undefined' || !node) {
    throw new Error('Browser DOM required');
  }

  await document.fonts?.ready;

  const options = {
    logger(message) {
      console.debug('[dom-to-image]', message);
    },
    onImageError(error) {
      console.warn('[dom-to-image image]', error);
    },
    // Add corsImg, requestInterceptor, imagePlaceholder, or
    // loadExternalStyleSheet according to your installed version.
  };

  try {
    const blob = await domtoimage.toBlob(node, options);
    if (!(blob instanceof Blob) || blob.size === 0) {
      throw new Error('Empty export');
    }
    return blob;
  } catch (error) {
    console.error('DOM export failed', {
      browser: navigator.userAgent,
      url: location.href,
      width: node.getBoundingClientRect().width,
      height: node.getBoundingClientRect().height,
      error
    });
    throw error;
  }
}

6. Make fonts render consistently

Missing fonts usually mean the font was not loaded when the clone was built, the stylesheet was not discoverable, or the font host rejected the request. Wait for document.fonts.ready. Verify the font request in Network, confirm the response is usable from the page origin, and test once with a system-font fallback. If the fallback works, restore fonts one at a time.

await document.fonts.ready;
const target = document.querySelector('#card');
const computed = getComputedStyle(target);
console.log({
  fontFamily: computed.fontFamily,
  fontSize: computed.fontSize,
  width: target.getBoundingClientRect().width
});

If a stylesheet is inserted immediately before capture, defer the export until the stylesheet has loaded and a subsequent animation frame has occurred. Cross-origin stylesheet discovery may require loadExternalStyleSheet in dom-to-image-more.

7. Check browser-specific limits

• Internet Explorer: the original README says it is unsupported because it lacks SVG foreignObject support.
• Safari: the original README says Safari is unsupported because of stricter foreignObject security. Its suggested workaround is to use toSvg and render on the server.
• Firefox: the README records problems with some external stylesheets. Test stylesheet-heavy exports separately from same-origin, inline-only exports.

These are browser and rendering-model constraints, so a JavaScript retry alone will not make every input portable. Choose a server-rendered SVG or another browser execution path when the required browser cannot rasterize the generated SVG.

8. A production checklist

1. Confirm the code runs only in a browser.
2. Confirm the target ref is non-null and has non-zero dimensions.
3. Wait for layout, document.fonts.ready, images, and dynamically loaded stylesheets.
4. Export a same-origin, inline-only version to establish a baseline.
5. Restore images, backgrounds, fonts, and stylesheets individually.
6. Fix CORS on the host that serves the failing resource.
7. Use a same-origin proxy or data URL when the host cannot provide CORS.
8. Add corsImg, requestInterceptor, imagePlaceholder, and logging where appropriate.
9. Reject empty or undecodable responses even when HTTP returned 2xx.
10. Test Safari, Firefox, and the browsers your users actually run.
11. Record browser, page URL, node dimensions, resource URL, and the original exception.

9. Common errors and fixes

10. Performance, reliability, and cost considerations

Large nodes require more cloning, serialization, SVG parsing, and canvas memory. Capture only the required element when a full page is unnecessary. Reduce oversized images and avoid repeatedly exporting unchanged content. Wait once for shared fonts and resources, then reuse the resulting Blob or object URL when possible.

Reliability improves when resource control is explicit: same-origin assets are easier to diagnose than third-party assets, inline or proxied resources remove dependency on another host, and a placeholder can preserve a usable export when a non-critical image is unavailable. Keep diagnostic logging in production behind a controlled log level and retain the original error for support cases.

The browser method has no separate screenshot-service charge, but it does require your application to operate a browser-compatible rendering path and, where needed, a same-origin proxy. A hosted API can move those responsibilities out of your frontend.

11. Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. It handles cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the result through X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf.

See the ScreenshotNeo API documentation for options and configuration.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

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(`Screenshot failed: ${res.status}`);
const bytes = Buffer.from(await res.arrayBuffer());
require('node:fs').writeFileSync('shot.webp', bytes);

The free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots, and every feature is available on every plan. Create a free ScreenshotNeo account.

12. FAQ

Can I call toBlob() from Node.js?

Not directly. The library needs a browser DOM, layout, SVG support, and a canvas implementation. Run it in a browser context or use a server-side rendering approach.

Why does replacing one image fix the whole export?

That image may be the first cross-origin resource that taints the canvas. Removing it proves the pipeline works for the remaining content; fix its CORS response or proxy it.

Should I retry a failed export?

Retry only after correcting readiness or resource conditions. Repeating a deterministic CORS or browser-support failure does not change the result.

Does a 200 response guarantee that an asset is usable?

No. The maintained documentation notes that an empty, non-Blob, or undecodable body can still fail resource production after a successful HTTP status.

When should I use a hosted screenshot API?

Use one when you need repeatable captures without shipping browser timing, CORS workarounds, popup handling, and browser-specific foreignObject behavior in your application.