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

Unable to generate image from valid HTML - getting empty Image #449

Closed manuelpoelzl closed 4 months ago

manuelpoelzl commented 5 months ago

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

Dhan3777 commented 5 months ago

+1 @manuelpoelzl

KhoaTheBest commented 5 months ago

I also have same issue

Ninamma commented 4 months ago

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 commented 4 months ago

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

Ninamma commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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

manuelpoelzl commented 4 months ago

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 commented 4 months ago

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