search

tsayen / dom-to-image

Generates an image from a DOM node using HTML5 canvas
Other
10.34k stars 1.68k forks source link

Cannot access rules; cannot fetch resource #319

Open micahlt opened 4 years ago

micahlt commented 4 years ago

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

MSCAU commented 4 years ago

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

sachdeva-shrey commented 4 years ago

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?

thingnoy commented 3 years ago

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"
/>
EliseyMartynov commented 1 year ago

@thingnoy thank you, crossorigin="anonymous" also worked for me.