Ask HN: How to Convert HTML to PNG on a Serverside?

13 pointsFruzenshtein6y ago15 comments

Hello everyone!

I need an advice. I work on a web app, that needs to send PNG images to users based on their achievements. The easiest way to do that is to construct an HTML that contains all the information, make a screenshot of it and finally upload it to the server. But this solution is extremely not optimal.

So I'm curious how to implement the same logic, but without frontend involvement in terms of image generation. I know that there are many commercial libs and services for that, but maybe there is some open-source more or less good libs for that.

I'm fine to work with Java, Scala, NodeJS or Golang.

Any advice is welcome!

15 comments

j456y ago

Not quite HTML, another way to similar output:

Both of the below should have a library you can use to generate the text into an image, if you don't want to work with them directly.

http://www.graphicsmagick.org

https://imagemagick.org/index.php

jeanvalmarc6y ago

https://wkhtmltopdf.org/

FruzenshteinOP6y ago

Wow! That's something what I'll try to use today Thanks

4d66ba066y ago

I've used this with .NET and it works well.

onesmallcoin6y ago

I'm currently bootstrapping an api/sass that takes any url and converts it to an image. It runs on top of chromium and uses the CDP protocol to do cool things like automate basic auth, custom http headers, injected js, mock mobile templates and device emulation, custom interactions with the webpage, it can also return json or upload the results to dropbox, s3, or google cloud storage. I'm looking to chat with people interested in this kind of technology as I polish off the final touches on the API and get the product live!

What kind of features would be useful to you if you were to go the API route for something like this?

dustinmr6y ago

This arrived in my RSS feed today. Seems to fit the bill.

https://www.thepolyglotdeveloper.com/2019/12/generate-images...

Grazester6y ago

There are libraries for converting HTML to PNG. Why would you need the frontend for anything?

Grab the users' achievement from the database(I could only assume user data is stored here). Format it however you want it to look in an HTML file then convert said HTML to a PNG. Its dead simple.

I did the equivalent but with PDF's for customer bills for a past job.

FruzenshteinOP6y ago

the main point here — I can not find any good lib with good community on GitHub I know there is html2image-java, but it's not maintained for a while :(

perilunar6y ago

Does it need to be HTML? SVG is easy to generate programmatically, and doesn't need to be converted.

FruzenshteinOP6y ago

I was considering HTML, since I know that it's pretty easy to represent with help of it what I need :) Haven't worked with SVG before, but apparently I have to look on it closer Thanks!

chriskinsman6y ago

Headless chrome/puppeteer...

FruzenshteinOP6y ago

No-no Headless chrome / firefox doesn't work here, since I need to run Selenium on the server and that's the most obvious overhead because any browser, even in a headless mode consumes RAM. This becomes even more critical if you need to process more than 100 images per minute :|

samwillis6y ago

From experience 100 images / min with chrome and puppeteer (you don't need Selenium) is more than doable with less than 1gb ram.

pizzaparty26y ago

You could roll your own fairly easily with qt webkit and a mere smidgen of c++. But it'd probably be similar yo puppeteer. Maybe you can save some time by not creating a new instance of puppeteer for each image.

quickthrower26y ago

Selenium can also snapshot pages.

j / k navigate · click thread line to collapse

Ask HN: How to Convert HTML to PNG on a Serverside?

13 pointsFruzenshtein6y ago15 comments

Hello everyone!

I'm fine to work with Java, Scala, NodeJS or Golang.

Any advice is welcome!

15 comments

j456y ago

Not quite HTML, another way to similar output:

Both of the below should have a library you can use to generate the text into an image, if you don't want to work with them directly.

http://www.graphicsmagick.org

https://imagemagick.org/index.php

jeanvalmarc6y ago

https://wkhtmltopdf.org/

FruzenshteinOP6y ago

Wow! That's something what I'll try to use today Thanks

4d66ba066y ago

I've used this with .NET and it works well.

onesmallcoin6y ago

What kind of features would be useful to you if you were to go the API route for something like this?

dustinmr6y ago

This arrived in my RSS feed today. Seems to fit the bill.

https://www.thepolyglotdeveloper.com/2019/12/generate-images...

Grazester6y ago

There are libraries for converting HTML to PNG. Why would you need the frontend for anything?

Grab the users' achievement from the database(I could only assume user data is stored here). Format it however you want it to look in an HTML file then convert said HTML to a PNG. Its dead simple.

I did the equivalent but with PDF's for customer bills for a past job.

FruzenshteinOP6y ago

the main point here — I can not find any good lib with good community on GitHub I know there is html2image-java, but it's not maintained for a while :(

perilunar6y ago

Does it need to be HTML? SVG is easy to generate programmatically, and doesn't need to be converted.

FruzenshteinOP6y ago

I was considering HTML, since I know that it's pretty easy to represent with help of it what I need :) Haven't worked with SVG before, but apparently I have to look on it closer Thanks!

chriskinsman6y ago

Headless chrome/puppeteer...

FruzenshteinOP6y ago

samwillis6y ago

From experience 100 images / min with chrome and puppeteer (you don't need Selenium) is more than doable with less than 1gb ram.

pizzaparty26y ago

quickthrower26y ago

Selenium can also snapshot pages.

j / k navigate · click thread line to collapse