dom-to-image
dom-to-image copied to clipboard
tsayen
Recently getting errors while reading the cssRules
Use case: description, code
I have been using domtoimage.toPng in my script, and recently I am seeing the following error message.
Error while reading CSS rules from chrome-extension://pioclpoplcdbaefihamjohnefbikjilc/content.css SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
A quick search gives me that: TL;DR: As of Chrome 64 you'll need to use a local development server to test functionality that depends on the CSS Object Model.
I am not sure if this is a bug due to this recent change, or mine. Any ideas?
Browsers
Chrome 65
@romanegloo did you end up solving this? I'm experiencing the same issue in Chrome 66. Firefox appears to be fine.
I haven't worked to isolate the issue but it seems like it might be happening when there are images present in the DOM to be converted. This is a guess since my same code is working in other places where no images are present.
In case the CSS is loaded via a link tag you can add crossorigin="anonymous" to solve this error in chrome.
Having the same problem in Chrome 67. I did what @MDSLKTR said, but that didn't solve the issue. Works fine on FireFox.
That fix does not work for me either.
@sashatran does the DOM that you're saving include images?
Getting this error in local and prod environments. My DOM has SVG elements.
I'm getting the same error in Chrome 68, both in local and production environments.
I have the same probleme with both chrome and firefox for project with angular 7 that using material design and material icons Error while reading CSS rules from https://fonts.googleapis.com/icon?family=Material+Icons SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
crossorigin="anonymous" worked in chrome Version 72.0.3626.109 (Official Build) (64-bit). Thanks @MDSLKTR
@zaidITpro you need to add crossorigin="anonymous" to the stylesheet for example
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:700,900|Open+Sans|Open+Sans+Condensed:700" rel="stylesheet" crossorigin="anonymous">.
You can read more on crossorigin here
i try to add crossorigin="anonymous" to the link element, it works fine. Thank you~
does the DOM that you're saving include images?
@simon-lang, I am using this package, getting the same error while I have IMG tag in my dom source element. Any ideas to solve this issue?
In case the CSS is loaded via a link tag you can add crossorigin="anonymous" to solve this error in chrome.
This worked for me, thanks.
@MDSLKTR crossorigin="anonymous" solves the issue in chrome. thanks, bud 👍
Any idea for the case of google.maps that loads the styles from the script I can't take the screenshot Help me please
