search

qq15725 / modern-screenshot

📸 Quickly generate image from DOM node using HTML5 canvas and SVG
https://www.toolpkg.com/image/html-to-image
MIT License
457 stars 32 forks source link

Source tag with max-width media query doesn't include images into screenshot #79

Open bybash opened 5 months ago

bybash commented 5 months ago

Hi,

Thanks for this great library. While using it, we realized that if you have images inside a picture tag with a source definition of max-width media, the library doesn't include it in the screenshot or give any error.

This example is not working.

<picture>
       <source media="(max-width:768px)" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/drevodom-havranske-m.jpg" type="image/jpeg" />
       <img width="1920" height="1027" src="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg" alt="" loading="eager" decoding="async" fetchpriority="high" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg 1920w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-300x160.jpg 300w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1024x548.jpg 1024w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-768x411.jpg 768w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1536x822.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
</picture>

This example is working with min-width media definition.

<picture>
       <source media="(min-width:769px)" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/drevodom-havranske-m.jpg" type="image/jpeg" />
       <img width="1920" height="1027" src="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg" alt="" loading="eager" decoding="async" fetchpriority="high" srcset="https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit.jpg 1920w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-300x160.jpg 300w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1024x548.jpg 1024w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-768x411.jpg 768w, https://prirodnydom.futur.sk/wp-content/uploads/2024/02/prirodnydom-hero-havranske-132A4596-HDR-Edit-Edit-Edit-1536x822.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px" />
</picture>

I didn't have a chance to dig inside the code to find the issue; I believe you can understand the issue quicker than I can. It happens on the 4.4.37 and 4.4.38 versions; I didn't test the lower versions.

Kind regards, Hakan