render HTML as image

Is it possible to render HTML as an image?

Example, I have some text with HTML markup. Like Bold, Italics, Drop shadow, Outline, Color… etc…
But I want to convert it to an image. I have been looking around but not lucky so far…

check this out:

https://www.monkeybreadsoftware.net/example-cocoacontrols-htmlviewermac-htmlviewerimage.shtml

[quote=405067:@Maximilian Tyrtania]check this out:

https://www.monkeybreadsoftware.net/example-cocoacontrols-htmlviewermac-htmlviewerimage.shtml[/quote]

Yeah, awesome. I would still have to play around with it to see it meets my needs, like transparency support etc.

Why?

if you’re on a mac, using the idea from https://forum.xojo.com/10842-saving-as-pdf-on-mac
you can print on a pdf file by program.
so if you use htmlviewer.print method, you can store the htmlviewer in a pdf file.
then using applescript, you can tell preview to convert it to a jpeg file.

and may be if you open the pdf in xojo, you can also save it as a jpeg IIRC.

Well… very long story.
I am a video editor and cameraman. Besides TV shows I do a lot of web videos for some social media marketing agency lately.
Now, the video’s are mainly in Dutch. We use titles and music, no voiceovers.

But in the i[/i] future a lot of videos need to be translated into English, German and Spanish. I started rendering out the video’s as I usually did. But now I render everything out with all the artwork, but without the titles: a clean feed, as we call it.
I want to make an app where I can simply paste the translations in. The app will render transparent images. These images are timed and added to the clean feed. Simple.

The easiest way to create the titles is by using the HTML markup. CSS3 has some great and quick features that would help me out and make the result identical to what I have already.

The idea is to make static HTML templates and with dynamic titles. I figured out how I can even animate the titles.
But this only works, if I can actually export the HTML as transparent PNGs.

So, yeah… that’s why…
It’s not that I’m lazy and not willing to type in all those translations… I just rather be efficient.

1 Like

I am on a mac.
I need transparency. I think that method won’t help me

I think a web viewer can be est to transparent on Mac, so we may be able to give you an image with transparency…

Ah, but the long stories are always good ones!

1 Like

Christian, you have a nice plugin that renders the image. I actually got it working.

But it only works on an HTMLviewer control in a window. What I would like to do is to create a new instance within a class.

Dim hView As new HTMLviewer        ' creating the instance
hView.DrawsBackgroundMBS = false   ' make sure the HTML code is rendered transparent.

I load the hView object with HTML data I want to render. Including all the styling.

But when I use your plugin, the NSImageMBS object is Nil.

dim img as NSImageMBS img = hView.RenderWebsiteImageMBS
When I add an HTMLviewer control to the window I can do the same thing. And that one works.

So, is there a way to get your plugin working with an instance of HTMLviewer inside a class?

A little example of an HTMLviewer on a window, that does render with transparency:

@Christian Schmitz
Any thoughts? Do you know if your plugin can use an instance of the HTMLviewer inside a class?

See my previous message :slight_smile:

AFAIK this is not possible. It would make my code really more simple. There are headless alternatives like WKHtmlToPDF or http://phantomjs.org . I’ve experimented a bit with the latter. It was even slower than loading the html into a html viewer.

I think HTMLViewer and WebViewMBS only render if on screen.
But nobody stops you from putting a tiny htmlviewer on a window. e.g. just starting at width-1/height-1, so only one pixel is visible.

Don’t rely on phantomjs. The author has discontinued work indefinitely and it’s got some serious bugs. I’d suggest looking into headless Chrome.

[quote=407574:@Christian Schmitz]I think HTMLViewer and WebViewMBS only render if on screen.
But nobody stops you from putting a tiny htmlviewer on a window. e.g. just starting at width-1/height-1, so only one pixel is visible.[/quote]

Yeah, I was thinking about taking that approach. I just place a tiny HTMLviewer on my window and pass a reference to my class. That should work, I think.
A better solution (at least, simpler to use the class) is maybe adding an HTMLviewer control dynamically to the “TrueWindow” in the Constructor of my class.
This way there is less to setup to work with the control.

It would be nice, though, to somehow use the webkit libraries straight from the class. So, I can even make a headless service app I can later call via Shell.

No, don’t use a 1x1 webviewer because this is slower than a normal sized webviewer.

@Greg O’Lone : Phantom.js was slower than the webviewer approach.

And don’t forget that you can’t load the html in a thread.

my idea was to use one, which is bigger than 1x1, but clipped by window frame to maybe only have one pixel visible.

The htmlviewer needs to be there, but it doesn’t need to be visible at all. I have a container with the htmlviewer offscreen at -300x -300 pixels.

I wouldn’t rely on that. Apple has been moving more and more towards not rendering off-screen windows and I’d expect Windows and Linux to follow suit if they haven’t already.

@Greg O’Lone: thanks for the tip.