dom-to-image
dom-to-image copied to clipboard
tsayen
Cannot access rules; cannot fetch resource
Use case: description, code
I'm using dom-to-image to generate little cards for users on Scratch
See https://repl.it/@micahlt/GetThatDesc for the full project.
Expected behavior
It'll generate a PNG of the card div and download it.
Actual behavior (stack traces, console logs etc)
SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
Error while reading CSS rules from https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap SecurityError:
Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
cannot fetch resource: https://cdn2.scratch.mit.edu/get_image/user/1882674_60x60.png?v=, status: 0
(And no, it doesn't download the image)
Library version
I'm using the latest version.
Browser
- [x] Chrome 49+
You need to go to the Google URL in your browser, and copy the CSS that it returns into a local CSS file. See it in action on https://beatjosh.com/budgets/FY2019/CTH
I'm experiencing the same issue while trying to generate a base-64 PNG image. I'm loading the google fonts using webfontloader. Is this the only workaround to this? @MSCAU?
This worked for me. just add crossorigin="anonymous"
<!-- add google font -->
<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Prompt:wght@100;300;400;500;600;700&display=swap"
rel="stylesheet"
crossorigin="anonymous"
/>
