bubkoo / html-to-image

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

HTML to Canvas conversion is not performing for dynamic nested DOM objects. #463

Open sthirunavukarasu opened 1 month ago

sthirunavukarasu commented 1 month ago

HTML to canvas is not working as expected for the dynamic DOM objects without any issue.

Expected Behavior

When use toCanvas method from this library the dynamic dom objects not getting converted as we expected and also for the nested HTML elements are not getting rendered with proper css styles there was some sort issue of applying the styles into those converted HTML to Canvas objects.

When use toCanvas method from this library it has convert Canvas into deepest level of HTML along with respective css styes which is applied to those elments.

Current Behavior

Screenshot 2024-05-02 at 8 06 26 PM

MicrosoftTeams-image (1)

Possible Solution

When we convert HTML to canvas it has to convert Nested DOM objects into deeper level along with defined css styles.

Steps To Reproduce

https://github.com/bubkoo/html-to-image/assets/101827188/eebac643-ae8c-4f9b-87d6-201c02bd2373

code example

const screenshot = await htmlToImage.toCanvas(pdftronUI, { canvasWidth: this.canvas.height, canvasHeight: this.canvas.height, width: this.canvas.width, height: this.canvas.height, });

No Error

```txt ```

Additional Context

Your Environment

Front-end: React JS Backend: .Net

vivcat[bot] commented 1 month ago

👋 @sthirunavukarasu

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.