htmlToImage Chrome 64 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

htmlToImage Chrome 64 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

新的 Chrome 64 安全更新似乎破坏了 htmlToImage 库。 None 的样式已正确计算并呈现为好像根本没有应用任何样式。

有人知道解决方法/修复方法吗？我需要将我的 CSS 放在服务器上并允许 CORS 吗？

我刚刚修正了这个错误。

分叉库并提出拉取请求。 在合并之前，您可以使用分叉的仓库：https://github.com/kmap-io/html-to-image

通过将 package.json 中 html-to-image 的目标替换为：

"html-to-image": "git+https://github.com/kmap-io/html-to-image.git"

关于错误

Chrome 抱怨（抛出错误）试图读取不存在的 属性。 Firefox 也会抱怨，但他们只会发出警告，而不是错误。修复包括替换 

if (sheet.cssRules) {
  ...

与 

if (sheet.hasOwnProperty('cssRules')) {
  ...

没有缺点（即：当 sheet 上存在 cssRules - 这是一个样式表 - 脚本遍历规则并将它们添加到文档中，正如预期的那样）。

如何修补（直到它被合并）。

出于某种原因，仅用我提交更改的分支替换库的存储库不适用于此包。我要求 lib 的作者添加有关如何在拉取请求后构建的说明，因为他们在自述文件中声明拉取请求和贡献是受欢迎的。在此之前，以下是使用 patch-package:

应用修复程序的方法
  • 在 scripts 内添加 "prepare": "patch-package"，在您项目的 package.json
  • npm i patch-package --save-dev
  • 在 node_modules/html-to-image/lib/embedWebFonts.js 中，将第 7 行从
    • 更改为 
try {

到

if (sheet.hasOwnProperty('cssRules')) try {
  • npx patch-package html-to-image

如果您有一个从头开始构建项目的部署脚本，您需要在调用 npm run build（或类似的，取决于您的堆栈）之前应用补丁：

git apply --ignore-whitespace patches/*.patch

就是这样。

合并修复程序时，您需要 运行:

npx patch-package html-to-image --reverse