Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Turn raw HTML into production-ready images for free

html2png.dev

Post reply on HN
Print view View original

11–20 of 87 posts

Re: Show HN: Turn raw HTML into production-ready images for free

#11

Post by Mogzol »

dtagames wrote: post #4
xiaohanyu wrote: post #3

Maybe webp is a better target than png?

It's not. JPG, I could live with but please not webp.

Why? I assume the intention is to show these images on a webpage somewhere. WebP is well-supported by browsers and can store lossless images at better compression ratios than PNG, so why not use it? I don't think using a lossy format like JPEG makes much sense. JPEG is a fine format for photos, but for HTML content rendered as an image I assume most people would want a lossless format so you don't get artifacts.

Re: Show HN: Turn raw HTML into production-ready images for free

#12

Post by oefrha »

I’m afraid out of all the waiting strategies available in Puppeteer/Playwright, waiting a fixed period is the worst possible. Maybe consider exposing the proper waiting strategies, load/domcontentloaded/networkidle, maybe even the more fine-grained ones https://playwright.dev/docs/actionability

Re: Show HN: Turn raw HTML into production-ready images for free

#14

Post by Retr0id »

oefrha wrote: post #12

I’m afraid out of all the waiting strategies available in Puppeteer/Playwright, waiting a fixed period is the worst possible. Maybe consider exposing the proper waiting strategies, load/domcontentloaded/networkidle, maybe even the more fine-grained ones https://playwright.dev/docs/actionability

I did some tests and it didn't seem like a fixed wait, when I kept making network requests the render timed out entirely.

Re: Show HN: Turn raw HTML into production-ready images for free

#15

Post by jihchi »

This is cool! One use case is generating a Mermaid diagram as an image. For example, you can use the following HTML[^1]:

  
  
    
      
    graph LR
        A --- B
        B-->C[fa:fa-ban forbidden]
        B-->D(fa:fa-spinner);
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; Then html2png.dev will serve you:

  https://html2png.dev/api/blob/oTVGhhCc6rDZYQFDIE3EGkcKs-KO6J9-_DHs-jO2OJc-d23fb4f2.png
[^1]: https://mermaid.js.org/config/usage.html#simple-full-example

Re: Show HN: Turn raw HTML into production-ready images for free

#16

Post by kaizenb »

Mogzol wrote: post #11
dtagames wrote: post #4

Earlier quoted context omitted.

It's not. JPG, I could live with but please not webp.

Why? I assume the intention is to show these images on a webpage somewhere. WebP is well-supported by browsers and can store lossless images at better compression ratios than PNG, so why not use it? I don't think using a lossy format like JPEG makes much sense. JPEG is a fine format for photos, but for HTML content rendered as an image I assume most people would want a lossless format so you don't get artifacts.

Definitely should be WebP.

Re: Show HN: Turn raw HTML into production-ready images for free

#17

Post by RadiozRadioz »

Retr0id wrote: post #9

What differentiates production-ready images from regular images?

They're bedazzled by a little bit of marketing flair.

Generally I find production-ready images have more synergy and tend to be web-scale. Often they're built from the ground up for AI & are blazing fast, at scale, and empower your team whilst unlocking new possibilities. As my sibling comment suggests, being cloud-native is a crucial factor too.

Re: Show HN: Turn raw HTML into production-ready images for free

#19

Post by JimDabell »

jihchi wrote: post #15

This is cool! One use case is generating a Mermaid diagram as an image. For example, you can use the following HTML[^1]: graph LR A --- B B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; Then html2png.dev will serve you: https://html2png.dev/api/blob/oTVGhhCc6rDZYQFDIE3EGkcKs-KO6J9-_DHs-jO2OJc-d23fb4f2.png [^1]: https://mermaid.js…

Why wouldn’t you just use Mermaid to generate the PNG directly?

Re: Show HN: Turn raw HTML into production-ready images for free

#20

Post by devmor »

reassess_blind wrote: post #18

I thought this was satire. Usually you want to go from image to HTML, not the other way around. I suppose it does have its uses, though.

It certainly does, that's why it's been a common dev tool for a bit over 20 years. I'm not really sure what the point of OP making it a web app is, though.
Post reply on HN