search

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

Add the possibility to pass an HTML string as parameter instead of an HTMLElement #445

Closed manuelpoelzl closed 5 months ago

manuelpoelzl commented 6 months ago

Expected Behavior

The provided HTML string should be parsed and then be used the same way as if you would provide an HTML element.

Possible Solution

Doing in the client side

Additional Context

While this library works great on the client side, it is currently not usable within my project.

I want to convert an HTML string to an image.

I do have a lot of HTML templates on my server, these templates can be filled with data from a specific record. So the client side is sending the infos for which record the template should be adjusted and then downloaded. My current approach is to read the predefined HTML templates as string and then replace certain keys within with required attributes form my record. But now, I basically do not have an option to convert this adjusted HTML to an image with this library.

I also do not want to move the whole template stuff to the client, since it does not make sense for the front end application to ship 20+ HTML templates.

vivcat[bot] commented 6 months ago

👋 @manuelpoelzl

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.

Dhan3777 commented 5 months ago

+1

@manuelpoelzl did you find any solution ?

manuelpoelzl commented 5 months ago

@Dhan3777 Not really, at least not directly. I'm currently tinkering with the jsdom library, which is a great way to get an HTML element. However, when generating with toJPG, an error is thrown that HTMLCanvas is not defined.

I haven't found a way around the error yet, will update you here as soon as I find out!

manuelpoelzl commented 5 months ago

@Dhan3777

Update: I ended up modifying the HTML on the server and send the HTML string back to my react app. There I use the DOMParser to convert the said stringt to an HTMLElement which I then pass to the toPng function of this lib.

There seems to be a problem tho, that the HTML can not be converted, since I get back an empty data url. In case you're interested, I opened #449