HTML to Image on Web

Does anyone know of a way to render HTML to an image on Web? I’ve seen some approaches on Desktop but that all is based on rendering it in a DesktopHTMLViewer, which doesn’t exist on web.

My app is generating a number of HTML files and I need to create thumbnails for them that will be displayed to the user.

Thanks in advance.

@Christian_Wheel
not sure exactly what the end goal is, to display rendered html?

There is the webHTMLViewer webHTMLViewer

The end goal is to display a thumbnail picture of the HTML. Something like this, but for Web.

A lot of people had a similar need for turning HTML to PDF and they used a command line tool to do so, but aside from that project’s deathknell – I looked and it only converts to PDF, no images. So I have no recommendations :confused:

1 Like

@Tim_Parnell
ah ok understand now :+1:

A quick search came up with a few alternatives:

1. Using Python with selenium and Pillow
2. Using Node.js with puppeteer

I only did cursory validation (i.e. searched copilot’s above recommendations to ensure they are actual things and validating sources exist - which they do so they are valid methods it seems).

Other than that save yourself a headache and use one of the many API’s available to do this.

1 Like

If you can get the HTML to PDF, you can use Ghostscript on the server to turn the PDF into any number of standard image formats.

If they are generated from templates, would it be sufficient to show a little preview of just the template? You could pre-generate it without any need for special support on the server.

Thanks everyone. I’ve been playing with a few tools but it’s problematic because a lot of the page is generated by javascript. My app plugs in javascript variables that render the page at load time, which is something that a lot of the converters struggle with.

If they are generated from templates, would it be sufficient to show a little preview of just the template? You could pre-generate it without any need for special support on the server.

Unfortunately the user can customize colors and fonts in the template, which will be be a mis-match if I use pre-rendered thumbnails.

Appreciate the replies. I probably need to re-think my approach.

I could build this quite easily but, depending on usage, it would require asynchronous rendering and round-trips between the client and server. Looking at your intention, I would probably opt for placeholder images rather than rendered thumbnails.

I was noodling over this problem this morning and thought of this oddball solution. :slight_smile:

Presumably, there is a stage in the user workflow where they make color selections, choose images, perhaps select a layout - whatever they do to configure the page. And that has to happen via the browser, right? When they’re making those selections and they click “Save”, could you render a small sample page on the client using their settings, and upload an image capture of the result to the server? It could take the form of “Here’s a preview, check your selections before you save” or perhaps an invisible div that the user never sees.

Exactly what I’m talking about. It would require rendering a representation to an image and sending that to the server for storage, then returning that image to the client for display.