Any cross-platform way to render html to an image file with Xojo in 2023

I’ve found solutions in the forum from years ago using now-deprecated MBS methods for the Mac, but I’m not seeing a cross-platform solution using current versions of Xojo (and current versions of 3rd-party add-ons such as MBS, GraffitiSuite).

My specific situation:
My app runs on Linux and Mac servers. It creates HTML pages (mainly text, with various styles and sizes) that users access with web browser. Now, I have a need to also display the same pages on some old TV’s that do not work with web pages but can display a slideshow of graphic images stored on a server.

My simple solution is to render the HTML to graphic files for use in the slideshows without any human intervention.

I’d prefer a Xojo-based solution (with or without MBS, GraffitiSuite, or other plug-ins), but if I can’t find one, my current thought is to find a stand-alone HTML to graphic file converter and install it as an additional app on the server to process those requests–but then I need to find separate Mac and Linux solutions and manage/monitor the additional app(s).

Anyone have any thoughts?

MBS has current functions to convert html to images.

For macOS I wouldn’t recommend https://wkhtmltopdf.org because it’s not being developed anymore. But for Windows and Linux it should be fine. The library als converts to image and not only to pdf.

On the Mac you can use
WKWebViewMBS.takeSnapshot(error As NSErrorMBS) As NSImageMBS
https://www.monkeybreadsoftware.net/webkit2-wkwebviewmbs-method.shtml

On Windows you should use the WebView2ControlMBS which has an Event when the image of the page is created;
https://www.monkeybreadsoftware.net/control-webview2controlmbs.shtml

For Linux I am not sure but you can probably use headless chrome from the command line;

It should be installed as long as chrome is installed.

I moved away from headless chrome, on Windows, because the last version introduced a bug that wouldn’t output images larger than a certain width/height. I think 800px width. They may have fixed it, but here is a discussion on the bug here;
https://groups.google.com/g/chromedriver-users/c/Yro2uGBU1fg?pli=1

In any case, you will want to use these options for headless chrome through the shell. This code is a bit older and I don’t use it anymore, so it may not work 100%. I also only used this on Windows, but I am guessing it will work the same on Linux;

Dim chromeOptions() As String
chromeOptions .append "--headless"
'chromeOptions.append "--headless=new" //you may have to specify =new to fix the sizing issue

chromeOptions.append "--screenshot=""" + self.windowsImagefile.NativePath + """"
'chromeOptions.append "--print-to-pdf=""" + self.windowsImagefile.NativePath + """" //if you want a pdf
chromeOptions.append "--default-background-color=00000000" // this is if you don't want a background color. You probably don't want this option because it makes the background transparent so you can remove it.
chromeOptions.append "--device-scale-factor=" + str(self.window.scalefactor) //likely you will want to use 2 here all the time
chromeoptions.Append "--disable-gpu"
chromeoptions.Append "--start-maximized"
chromeoptions.Append "--hide-scrollbars"
chromeoptions.append "--window-size=" + Str(idealwidth, "####0") + "," + Str(idealHeight, , "####0") //set your desired window size. This might still have the bug mentioned above 
chromeoptions.Append "--fullPage=true" //you want the full page so set to true

//then turn it into a shell command
Dim cmd As String = """" + chrome.NativePath + """ " + Join(chromeOptions, " ") + " """ + self.windowshtmlOutputFile.URLPath + """" 

//self.winshell is a window property here;
self.winshell = new shell
self.winshell.executemode = shell.ExecuteModes.Asynchronous
self.winshell.TimeOut = 2000
self.winshell.execute( cmd )

The problem with this though is that you don’t know when it is done and when the image files has been created. So I had to make a timer to check for an image file (the windowshtmlOutputFile) in a temporary location. You also won’t know if it fails so you need a timeout.

You can also use the MBS plugin to watch the folder where you are writing to for any file system changes,

1 Like

I am still using wkhtmltopdf for all my apps converting to html to pdf, even on the Mac without any problem.

I have use it since 2007 perhaps. I know you can generate image using wkhtmltoimage

wkhtmltopdf is Intel only and will not get an ARM version.

I have to rosetta on new Mac and just use the intel version

Phantomjs is the best replacement for wkhtmltopdf.
I used both but phantomjs is still updated and should work on all platforms.

1 Like

Phantom.js has been discontinued since 2018. I did some testing a long while ago and it was really slow.

Damn, must have been a long time I didn’t check the repo.

Puppeteer is a nice PhantomJS alternative:

These are great leads! It’s a shame that it seems like a different solution is needed on each platform. I’ll post an update here when I’ve settled on an approach, but feel free to keep sharing ideas and suggestions! Thanks again!