bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.4k stars 505 forks source link

feat: allow user to provide custom pseudo elements to be captured #376

Open SUCHMOKUO opened 1 year ago

SUCHMOKUO commented 1 year ago

Hi! Thanks for maintaining this great library!

I've tried it and just found that it might be great if we can control what pseudo elements will be included in the captured image rather than just ::before and ::after, sometimes we might want to include some non-standard but useful ones, like ::-webkit-scrollbar and ::-webkit-scrollbar-thumb, so I created this PR to add a new option includedPseudoElements to allow user to customize the rule of the included pseudo elements.

Hope this can be helpful :)

Description

  1. Add new option includedPseudoElements.
  2. Refactor clonePseudoElements to receive the includedPseudoElements list and clone all the pseudo elements in the list.
  3. Add test for this option.
  4. Update README.

Types of changes

Self Check before Merge

vivcat[bot] commented 1 year ago

👋 @SUCHMOKUO

💖 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:

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

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

Base: 62.93% // Head: 62.93% // No change to project coverage :thumbsup:

Coverage data is based on head (f6363fc) compared to base (b751cbf). Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #376 +/- ## ======================================= 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/376?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96) | Coverage Δ | | |---|---|---| | [src/util.ts](https://codecov.io/gh/bubkoo/html-to-image/pull/376?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL3V0aWwudHM=) | `62.80% <ø> (ø)` | | | [src/clone-node.ts](https://codecov.io/gh/bubkoo/html-to-image/pull/376?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL2Nsb25lLW5vZGUudHM=) | `71.42% <100.00%> (ø)` | | | [src/clone-pseudos.ts](https://codecov.io/gh/bubkoo/html-to-image/pull/376?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL2Nsb25lLXBzZXVkb3MudHM=) | `29.16% <100.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 at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.