search

tsayen / dom-to-image

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

Recently getting errors while reading the cssRules #205

Open romanegloo opened 6 years ago

romanegloo commented 6 years ago

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

zollero commented 6 years ago

Have the same error in Chrome 65

simon-lang commented 6 years ago

@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.

MDSLKTR commented 6 years ago

In case the CSS is loaded via a link tag you can add crossorigin="anonymous" to solve this error in chrome.

sashatran commented 6 years ago

Having the same problem in Chrome 67. I did what @MDSLKTR said, but that didn't solve the issue. Works fine on FireFox.

simon-lang commented 6 years ago

That fix does not work for me either.

@sashatran does the DOM that you're saving include images?

daiokaio commented 6 years ago

Getting this error in local and prod environments. My DOM has SVG elements.

sashatran commented 6 years ago

@simon-lang no images, just a div element.

GabrielShaad commented 6 years ago

I'm getting the same error in Chrome 68, both in local and production environments.

FARHANE commented 5 years ago

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

jsanjeev commented 5 years ago

crossorigin="anonymous" worked in chrome Version 72.0.3626.109 (Official Build) (64-bit). Thanks @MDSLKTR

zaidITpro commented 5 years ago

@jsanjeev can you please explain the solution a bit.

MuthomiMate commented 5 years ago

@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

zhouxiongking commented 4 years ago

i try to add crossorigin="anonymous" to the link element, it works fine. Thank you~

BonBonSlick commented 4 years ago

was not able remove it in nuxt + vuetify

priyomukul commented 3 years ago

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?

shanghaobo commented 3 years ago

我发现img标签内的src为空时会出现这个问题，不为空就正常

chaderenyore commented 2 years ago

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.

Gulshanaggarwal commented 2 years ago

@MDSLKTR crossorigin="anonymous" solves the issue in chrome. thanks, bud 👍

cfpenton commented 1 year ago

Any idea for the case of google.maps that loads the styles from the script I can't take the screenshot Help me please