Fixes issue fetching font css when cssRules are inaccessilbe

dancrevier commented 1 year ago

Fixes the handling of font css when cssRules are inaccessible.

Description

When cssRules are inaccessible in a style sheet, getCSSRules will throw an exception trying to read them, and then the catch handler will fetch the css. But, when it goes to insert the rule, it has a bug where it uses sheet.cssRules.length, which causes an exception again and the rules are lost.

This results in the error:

Error inlining remote css file SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

This is referenced in a few issues such as issue #49.

Motivation and Context

This fixes issues when fonts are referenced via external style sheets and the css cannot be read. The resulting image will be missing the fonts that failed. This error is mentioned in a few issues such as https://github.com/bubkoo/html-to-image/issues/49.

Types of changes

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to change)
[ ] Enhancement (changes that improvement of current feature or performance)
[ ] Refactoring (changes that neither fixes a bug nor adds a feature)
[ ] Test Case (changes that add missing tests or correct existing tests)
[ ] Code style optimization (changes that do not affect the meaning of the code)
[ ] Docs (changes that only update documentation)
[ ] Chore (changes that don't modify src or test files)

Self Check before Merge

[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[x] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[x] All new and existing tests passed.

vivcat[bot] commented 1 year ago

👋 @dancrevier

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

fix: don't overwrite prevent_default if default wasn't prevented
feat: add graph.scale() method
docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

Follow the TypeScript coding style.
Run npm run lint locally to catch formatting errors earlier.
Document any user-facing changes you've made.
Include tests when adding/changing behavior.
Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

codecov[bot] commented 1 year ago

Codecov Report

Patch and project coverage have no change.

Comparison is base (b751cbf) 62.93% compared to head (38abea8) 62.93%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #384 +/- ## ======================================= Coverage 62.93% 62.93% ======================================= Files 10 10 Lines 580 580 Branches 143 143 ======================================= Hits 365 365 Misses 151 151 Partials 64 64 ``` | [Impacted Files](https://codecov.io/gh/bubkoo/html-to-image/pull/384?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96) | Coverage Δ | | |---|---|---| | [src/embed-webfonts.ts](https://codecov.io/gh/bubkoo/html-to-image/pull/384?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL2VtYmVkLXdlYmZvbnRzLnRz) | `30.63% <0.00%> (ø)` | | Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

petrgazarov commented 1 year ago

I ran this branch locally, and it fixed my issue reported here for the most part. Google fonts are loading now.

The part that's not fixed is the icons, but that appears to be a separate issue.

stumpykilo commented 1 year ago

When can we get this PR reviewed and merged in? This bug is blocking us from adopting this package.

homanp commented 1 year ago

+1

robertjmschmidt commented 1 year ago

+1

morjanmihail commented 1 year ago

+1

sherryysj commented 1 year ago

+1! May we have this merged? Thank you so much!

panditlakshya commented 1 year ago

+1! May we have this merged? Thank you so much!

plarner30 commented 11 months ago

pls merge

RolandoAndrade commented 8 months ago

+1

Kitenite commented 8 months ago

+1 needs this issue fixed

incuedAA commented 7 months ago

We need this to be merged in.

petrmiko commented 7 months ago

+1 pls

cliveportman commented 5 months ago

Come on, we need this.

arielzao150 commented 5 months ago

Why is this not merged yet?

diadal commented 4 months ago

there is a default fix for this first get the fonts fontEmbedCss and then skipFonts

async function useHtml2Img(el: HTMLCanvasElement) {
  try {
    const fontEmbedCss = await getFontEmbedCSS(el);
    const blob = <Blob>(
      await toBlob(el, { skipFonts: true, fontEmbedCSS: fontEmbedCss })
    );

    if (window.saveAs) {
      window.saveAs(blob, 'new.png');
    } else {
      saveAs(blob, 'new.png');
    }

  } catch (error) {
    console.log('error: ', error);
  }
}

bubkoo / html-to-image