0

I am populating resource images into an HTML table on a WebBrowser control. Thus far, I can convert images to Byte using the function listed below, but am unable to cast the memory stream into the HTML:

Dim imgBase64 As String = Convert.ToBase64String(BmpToBytes_MemStream(My.Resources.myimage))

Dim str1 as String = ""

str1 += ("<table class=" & """" & "mycssclass" & """" & " Align=center>")
str1 += ("<caption><b>My Caption</b></caption>")
str1 += "<tr><td><iframe width=100% height=100% src=imgBase64></iframe></td></tr>"
str1 += ("</table>")
WebBrowser1.Refresh()
WebBrowser1.DocumentText = str1

Below is the image BMP to byte function:

 Private Function BmpToBytes_MemStream(ByVal bmp As Bitmap) As Byte()
        Return new ImageConverter().ConvertTo(bmp, GetType(byte()))
 End Function

There is an example of loading a pdf into an IFRAME inside the HTML, like this:

  $"<iframe width=100% height=500 src=""data:Application/pdf;base64,{pdfBase64}"">"

However, I am unsure of the exact syntax required for displaying the Base64 image inside the IFRAME in HTML. Also, is the "$" character needed?

  • 1
    You can use a Base64 string as described in: [Set Webview2 Source directly to a binary stream](https://stackoverflow.com/a/68671066/7444103). As also described there, use a HTML5 header. In this case, you may want to add `` to `` -- Not sure how CSS is related to this. – Jimi Aug 07 '21 at 23:35
  • See modified OP. The answer you referenced is helpful strictly for embedding a PDF inside an IFRAME environment within HTML, but is noninformative regarding embedding an image into an IFRAME in HTML. Especially the syntax: `data:Application/pdf`. –  Aug 08 '21 at 01:34
  • 1
    Well, you just need the Base64 conversion functionality, that's the important part. The `SRC` Attribute of an `` element can be set directly the same way. -- Of course you don't use `Application/pdf` as mime type, you can use `image/png` or `image/jpeg` etc. Set this value too, based on the type of the Image you're dealing with (as everyone else does). You can also convert all incoming images to a single format, e.g., PNG (default Format), so you don't have to bother. – Jimi Aug 08 '21 at 01:40
  • 1
    BTW, this is very wrong: `Dim bmpBytes() As Byte = ms.GetBuffer()`. You need `ms.ToArray()`. But, use the ImageConverter class instead: e.g., just `return new ImageConverter().ConvertTo(bmp, GetType(byte()))`. You can convert back from a byte array with `dim imageFromBytes = DirectCast(New ImageConverter().ConvertFrom(imageBytes), Image)` – Jimi Aug 08 '21 at 02:06
  • Removed size requirements, and this is what is in the HMTL source at run-time: so it looks okay? `` –  Aug 08 '21 at 02:07
  • It's what you have posted above, changing the mime type: `$" – Jimi Aug 08 '21 at 02:12

1 Answers1

1

Thanks to @Jimi's comments, I wanted to condense the discussion to an answer that worked.

Add the following function somewhere in your code:

Private Function BmpToBytes_MemStream(ByVal bmp As Bitmap) As Byte()
    Return New ImageConverter().ConvertTo(bmp, GetType(Byte()))
End Function

Next, convert the resource image (which is a png image named myimage.png) to Base64:

 Dim myimage64 As String = Convert.ToBase64String(BmpToBytes_MemStream(My.Resources.myimage))

Finally, embed the converted image in HTML code using e.g.:

Dim str1 as String = ""

str1 += "<table class=" & """" & "mycssclass" & """" & " Align=center>"
str1 += "<caption><b>My Caption</b></caption>"
str1 += "<tr><td>$"<img src = ""data:image/png;base64,{myimage64}"">"</td></tr>"
str1 += ("</table>")
WebBrowser1.Refresh()
WebBrowser1.DocumentText = str1
  • 1
    If you need the Mime-Type, you can get it with `dim mimeType = ImageCodecInfo.GetImageEncoders().FirstOrDefault(Function(enc) enc.FormatID = bmp.RawFormat.Guid)?.MimeType` – Jimi Aug 08 '21 at 02:40