I'm working on an open-source feedback widget called React Roast that allows users to select a DOM element and report bugs by taking a screenshot of it. The process is simple: click an element, get a screenshot, and send a report. It works great for about 95% of the DOM using html2canvas-pro, but I'm hitting a wall with some custom web fonts and cross-origin iframes. The screenshots either turn into boring Times New Roman or come out as empty white boxes for those iframes. I understand the CORS and tainted canvas issues behind this, but I'm looking for a workaround that doesn't require a heavy proxy server. I've also experimented with libraries like html2canvas, html-to-image, and dom-to-image, but I want to keep this solution lightweight and client-side for easy integration into React apps. Let me know if you're interested in my implementation!
2 Answers
Have you thought about using the Screen Capture API? It might capture the user's screen more accurately rather than just duplicating what's rendered. It could take a bit more effort, though.
You're definitely not chasing a ghost, but you are up against some browser security boundaries. Cross-origin iframes just can't be captured client-side due to security limitations unless the iframe allows it. Make sure your fonts are fully loaded (check with `document.fonts.ready`) and that you’re serving them with the right CORS headers. If you need absolute fidelity, consider using a headless browser like Puppeteer, as it's currently the most reliable option.
Related Questions
Keep Your Screen Awake Tool
Favicon Generator
JWT Token Decoder and Viewer
Ethernet Signal Loss Calculator
Glassmorphism CSS Generator with Live Preview
Remove Duplicate Items From List