Unable to generate image from valid HTML - getting empty Image

[manuelpoelzl]

I'm unable to get any image from a valid HTMLElement.
The HTML looks fine but the toJPG and toPNG functions return an empty data url .

Expected Behavior

The HTML should be converted to an image and the data url should get returned.

Current Behavior

The dataUrl is data:, for a perfectly fine HTML

Possible Solution

N/A

Steps To Reproduce

1. Get an HTML string
2. Parse this string with the DOMParser class
3. Access the documentElement
4. console log the said element (you'll see that the HTML is perfectly fine)
5. Call the toPng function with the said element
6. The returned data url is data:,

Your Environment

• html-to-image: 1.11.11
• OS: Windows 10 Pro 22H2
• Browser: Microsoft Edge 120.0.2210.133

[Dhan3777]

+1 @manuelpoelzl

[KhoaTheBest]

I also have same issue

[Ninamma]

Is your element a div? I had a similar issue when the element I was trying render was a span, but I saw this comment and changed the element to be a div and that has fixed this issue, although I don't fully understand why (possibly to do with inline vs block?).

[manuelpoelzl]

In my case it is a div with 3 other divs inside of it, so nothing too complicated I'd say.

[Ninamma]

I just realised that my issue wasn't actually related to the element being div or span 🤦‍♀️
I think the element just needs to not be display: inline and have measurable width and height. So if I set the span to display: flex it works as well.

[manuelpoelzl]

Can't solve it the way you described @Ninamma.
The HTML element I'm trying to convert to an image is rather simple:

<div id="mainNode" style="background-color: red;display: flex">
  <h2>TEST</h2>
</div>

All I get is still data:,

[PushparajGabhane]

Try adding height and width to the container where HTML is wrapped.

[manuelpoelzl]

Unfortunately I still get the same result, even with width and height specified, I even tried to wrap this div with another div that has width and height specified, without success.

<div id="mainNode" style="background-color: red;display: flex; height:350px; width:900px;">
  <h2>TEST</h2>
</div>

[manuelpoelzl]

Solved:
adding width and height as options to the toPng function worked

[biiibooo]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.