search

bubkoo / html-to-image

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

CSS pseudo elements #363

Open squidgemonster opened 1 year ago

squidgemonster commented 1 year ago

I have a feeling that these may well be omitted as they are notoriously tricky elements, but I hoping there is a fix/possibility to allow the display of ::before and ::after pseudo elements in generated JPG and/or PNG.

Expected Behavior

Styled pseudo elements should be rendered in the generated image. Currently have an example page that has a LOT of pseudo elements with background images on them.

Current Behavior

All pseudo elements are missed in the rendered image.

Possible Solution

Unsure sadly :(

Steps To Reproduce

Add a styled pages with a background-image applied to a CSS pseudo element and this does not appear on the rendered image.

Error Message & Stack Trace

NA

vivcat[bot] commented 1 year ago

👋 @squidgemonster

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

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

pcantarelli commented 1 year ago

Hi there, I'm having the same issue, more specifically with the styles of the ::placeholder pseudo element (should not be visible because of opacity: 0;)

I can see that @chahu opened an Issue for that last year (#269), which got closed due to stale. His issue has a detailed explanation of this behavior in case need, but the workaround solution does not work for me at the moment, since I need the placeholder text hidden on the screenshot image.

Can anyone help with that?

DustinBrett commented 1 year ago

There is code to do some cloning btw. https://github.com/bubkoo/html-to-image/blob/efdf04338f3b943e9a0b27c4e1ee0b09d470c743/src/clone-pseudos.ts#L34

I used it for partially cloning webkit-slider-thumb, although it still wasn't perfect.

jkieboom commented 1 year ago

I ran into this issue as well with a background-image in a :before pseudo element. My current workaround is to post-process the SVG from html-to-image to convert the external referenced images to embedded data urls. Would be great if this could be done inside html-to-image.

hungtcs commented 1 week ago

👀 Any progress? html-to-image won't render my watermark, it was implemented with pseudo-elements and background images, which I now have to replace with other tags.