Render inline HTML to an Image in VB.Net - html

Question

Basically I have a string that will looks like this :
<p>HELLO <span style='color:red'>WORLD</span></p>
How would I go about converting this string of HTML into an image? (Bitmap, PNG, etc.)
Does anyone know of any VB.NET tools that will do this? Since this is a string, it cannot read from the DOM as it technically isn't part of the DOM.
My overall purpose is to create an ASPX page that will reading a field containing some HTML from a database, converting that HTML into an image, and the steaming that image on the page by spoofing the ContentType to "image/png", thereby creating a dynamic image that I can use in an RDLC file.
The reason we're displaying HTML as an image in an RDLC file is simply because all of our reports are using ReportViewer version 9.0 which does not support interpreted HTML. Creating a dynamic image based on HTML allows us to display the "formatting" that we want to show directly in the report, which we could not do otherwise, not with such flexibility anyways.

Answer 1

You can render html on the screen using the WebBrowser control, then copy the screen bitmap to am image file.
WebBrowser1.DocumentText = "<p>HELLO <span style='color:red'>WORLD</span></p>"

Answer 2

This code ALMOST works. You need to click the button twice, and it only works properly on the second click. There is a timing issue with grabbing the rendered page you will need to solve. Also, the form must be in front, as it is a screengrab, so only grabs the visible portion of the screen.
Option Strict On
Imports System.Drawing
Public Class Form1
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim strHTML As String = "<p>HELLO <span style='color:red'>WORLD</span></p>"
WebBrowser1.DocumentText = strHTML
Dim bmp As Bitmap = GetControlImage(WebBrowser1)
Dim strFilename As String = "C:\Junk\Junk.png"
bmp.Save(strFilename, System.Drawing.Imaging.ImageFormat.Png)
End Sub
Private Declare Function BitBlt _
Lib "gdi32.dll" ( _
ByVal hdcDest As IntPtr, _
ByVal x As Int32, _
ByVal y As Int32, _
ByVal Width As Int32, _
ByVal Height As Int32, _
ByVal hdcSrc As IntPtr, _
ByVal xSrc As Int32, _
ByVal ySrc As Int32, _
ByVal dwRop As Int32 _
) As Boolean
Private Const SRCCOPY As Integer = &HCC0020
Function GetControlImage(ctl As Control) As Bitmap
Dim grpInput As Graphics = ctl.CreateGraphics
' Create a compatible bitmap and get its Graphics object
Dim bmpOutput As New Bitmap(ctl.ClientRectangle.Width, ctl.ClientRectangle.Height, grpInput) 'formImage = New Bitmap(frmForm.ClientRectangle.Width, frmForm.ClientRectangle.Height, formGraphics)
Dim grpOutput As Graphics = Graphics.FromImage(bmpOutput)
' Get the target and source device context handles (hDC)
Dim sourceDC As IntPtr = grpInput.GetHdc
Dim targetDC As IntPtr = grpOutput.GetHdc
' Copy the control's client area
BitBlt(targetDC, 0, 0, ctl.ClientRectangle.Width, ctl.ClientRectangle.Height, sourceDC, ctl.ClientRectangle.X, ctl.ClientRectangle.Y, SRCCOPY)
' Release DCs and dispose objects
grpInput.ReleaseHdc(sourceDC)
grpInput.Dispose()
grpOutput.ReleaseHdc(targetDC)
grpOutput.Dispose()
Return bmpOutput
End Function
End Class

Answer 3

wkhtmltopdf also has a a wkhtmltoimage.exe that you can utilize, try http://wkhtmltopdf.org/

Answer 4

Adding "Application.DoEvents" immediately before the instruction "Dim bmp As Bitmap = GetControlImage(WebBrowser1)" seems to solve the problem of having to press the button twice.