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.
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
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.
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.
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.