\
**Category:** General\
**Created:** [September 11, 2018, 4:19pm UTC](https://forum.xojo.com/t/render-html-as-image/45260 "2018-09-11T16:19:46Z")\
**Posts on this page:** 20\
**Page:** 1
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 11, 2018, 4:19pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/1 "2018-09-11T16:19:46Z")
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…
---
**Author:**  [@Maximilian\_Tyrtania](https://forum.xojo.com/u/Maximilian_Tyrtania)\
**Post date:** [September 11, 2018, 4:28pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/2 "2018-09-11T16:28:11Z")
check this out:
[https://www.monkeybreadsoftware.net/example-cocoacontrols-htmlviewermac-htmlviewerimage.shtml](https://www.monkeybreadsoftware.net/example-cocoacontrols-htmlviewermac-htmlviewerimage.shtml)
---
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 11, 2018, 5:48pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/3 "2018-09-11T17:48:16Z")
[quote=405067:@Maximilian Tyrtania]check this out:
[https://www.monkeybreadsoftware.net/example-cocoacontrols-htmlviewermac-htmlviewerimage.shtml[/quote]](https://www.monkeybreadsoftware.net/example-cocoacontrols-htmlviewermac-htmlviewerimage.shtml%5B/quote%5D)
Yeah, awesome. I would still have to play around with it to see it meets my needs, like transparency support etc.
---
**Author:**  [@Tim\_Parnell](https://forum.xojo.com/u/Tim_Parnell)\
**Post date:** [September 11, 2018, 6:47pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/4 "2018-09-11T18:47:12Z")
> [@405066:@Edwin van den Akker](#):
>
> I have some text with HTML markup. Like Bold, Italics, Drop shadow, Outline, Color… etc… But I want to convert it to an image.
Why?
---
**Author:**  [@Jean-Yves\_Pochez](https://forum.xojo.com/u/Jean-Yves_Pochez)\
**Post date:** [September 11, 2018, 6:58pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/5 "2018-09-11T18:58:45Z")
if you’re on a mac, using the idea from [https://forum.xojo.com/10842-saving-as-pdf-on-mac](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.
---
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 11, 2018, 7:06pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/6 "2018-09-11T19:06:55Z")
> [@405106:@Tim Parnell](#):
>
> Why?
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.
---
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 11, 2018, 7:08pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/7 "2018-09-11T19:08:50Z")
> [@405110:@Jean-Yves Pochez](#):
>
> if you use htmlviewer.print method, you can store the htmlviewer in a pdf file… … sing applescript, you can tell preview to convert it to a jpeg file.
I am on a mac.
I need transparency. I think that method won’t help me
---
**Author:**  [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\
**Post date:** [September 11, 2018, 7:15pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/8 "2018-09-11T19:15:17Z")
I think a web viewer can be est to transparent on Mac, so we may be able to give you an image with transparency…
---
**Author:**  [@Tim\_Parnell](https://forum.xojo.com/u/Tim_Parnell)\
**Post date:** [September 11, 2018, 7:30pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/9 "2018-09-11T19:30:29Z")
> [@405112:@Edwin van den Akker](#):
>
> Well… very long story.
Ah, but the long stories are always good ones!
---
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 25, 2018, 9:25pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/10 "2018-09-25T21:25:59Z")
> [@405118:@Christian Schmitz](#):
>
> I think a web viewer can be set to transparent on Mac, so we may be able to give you an image with transparency…
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.
```auto
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:
---
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 27, 2018, 10:17am UTC](https://forum.xojo.com/t/render-html-as-image/45260/11 "2018-09-27T10:17:07Z")
@Christian Schmitz
Any thoughts? Do you know if your plugin can use an instance of the HTMLviewer inside a class?
See my previous message 🙂
---
**Author:**  [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\
**Post date:** [September 27, 2018, 10:23am UTC](https://forum.xojo.com/t/render-html-as-image/45260/12 "2018-09-27T10:23:36Z")
AFAIK this is not possible. It would make my code really more simple. There are headless alternatives like WKHtmlToPDF or [http://phantomjs.org](http://phantomjs.org) . I’ve experimented a bit with the latter. It was even slower than loading the html into a html viewer.
---
**Author:**  [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\
**Post date:** [September 27, 2018, 10:30am UTC](https://forum.xojo.com/t/render-html-as-image/45260/13 "2018-09-27T10:30:28Z")
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.
---
**Author:**  [@Greg\_O\_Lone](https://forum.xojo.com/u/Greg_O_Lone)\
**Post date:** [September 27, 2018, 11:12am UTC](https://forum.xojo.com/t/render-html-as-image/45260/14 "2018-09-27T11:12:26Z")
> [@407573:@Beatrix Willius](#):
>
> AFAIK this is not possible. It would make my code really more simple. There are headless alternatives like WKHtmlToPDF or [http://phantomjs.org](http://phantomjs.org) . I’ve experimented a bit with the latter. It was even slower than loading the html into a html viewer.
Dont rely on phantomjs. The author has discontinued work indefinitely and its got some serious bugs. Id suggest looking into headless Chrome.
---
**Author:**  [@Edwin\_van\_den\_Akker](https://forum.xojo.com/u/Edwin_van_den_Akker)\
**Post date:** [September 27, 2018, 11:24am UTC](https://forum.xojo.com/t/render-html-as-image/45260/15 "2018-09-27T11:24:42Z")
[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.
---
**Author:**  [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\
**Post date:** [September 27, 2018, 12:24pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/16 "2018-09-27T12:24:43Z")
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.
---
**Author:**  [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\
**Post date:** [September 27, 2018, 12:26pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/17 "2018-09-27T12:26:49Z")
my idea was to use one, which is bigger than 1x1, but clipped by window frame to maybe only have one pixel visible.
---
**Author:**  [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\
**Post date:** [September 27, 2018, 12:44pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/18 "2018-09-27T12:44:33Z")
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.
---
**Author:**  [@Greg\_O\_Lone](https://forum.xojo.com/u/Greg_O_Lone)\
**Post date:** [September 27, 2018, 1:18pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/19 "2018-09-27T13:18:11Z")
> [@407591:@Beatrix Willius](#):
>
> 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 wouldnt rely on that. Apple has been moving more and more towards not rendering off-screen windows and Id expect Windows and Linux to follow suit if they havent already.
---
**Author:**  [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\
**Post date:** [September 27, 2018, 1:42pm UTC](https://forum.xojo.com/t/render-html-as-image/45260/20 "2018-09-27T13:42:17Z")
@Greg O’Lone: thanks for the tip.
[Next page](https://forum.xojo.com/t/render-html-as-image/45260.md?page=2)