bubkoo / html-to-image

βœ‚οΈ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.69k stars 531 forks source link

fix(cloneCSSStyle): rounded values of d attribute fix #358

Closed AndrewN93 closed 1 year ago

AndrewN93 commented 1 year ago

There is a difference between values in actual d attribute of path and value that returns from window.getComputedStyles() object For some generated svg shapes at particular place is crutial to have exact values in order them to be displayed at all.

Closes #357

Description

There is a problem appears for path elements with precise values in d attribute on cloneCSSStyle step. window.getComputedStyles() which is used to get styles to apply them on cloned element returns rounded values which is wrong for some elements. For e.g here I'm inspecting cloned element and the elements are actually present but because of rounded values after styles were copied they are invisible with height 0 and width 0:

image

Types of changes

Self Check before Merge

vivcat[bot] commented 1 year ago

πŸ‘‹ @AndrewN93

πŸ’– 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: 63.24% // Head: 63.24% // No change to project coverage :thumbsup:

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

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #358 +/- ## ======================================= Coverage 63.24% 63.24% ======================================= Files 10 10 Lines 555 555 Branches 129 129 ======================================= Hits 351 351 Misses 146 146 Partials 58 58 ``` | [Impacted Files](https://codecov.io/gh/bubkoo/html-to-image/pull/358?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96) | Coverage Ξ” | | |---|---|---| | [src/clone-node.ts](https://codecov.io/gh/bubkoo/html-to-image/pull/358?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=%E5%B4%96#diff-c3JjL2Nsb25lLW5vZGUudHM=) | `75.92% <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.

vivcat[bot] commented 1 year ago

πŸ‘‹ @AndrewN93 Congrats on merging your first pull request! πŸŽ‰πŸŽ‰πŸŽ‰

vivcat[bot] commented 1 year ago

:tada: This PR is included in version 1.11.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket: