在 WebBrowser 控件的 HTML 中嵌入资源图像答案

【问题标题】：Embed resource image inside HTML on WebBrowser control在 WebBrowser 控件的 HTML 中嵌入资源图像
【发布时间】：2021-10-12 05:06:26
【问题描述】：

我正在将资源图像填充到 WebBrowser 控件上的 HTML 表中。到目前为止，我可以使用下面列出的函数将图像转换为字节，但无法将内存流转换为 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

下面是图片BMP转字节功能：

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

有一个将 pdf 加载到 HTML 中的 IFRAME 中的示例，如下所示：

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

但是，我不确定在 HTML 的 IFRAME 内显示 Base64 图像所需的确切语法。另外，是否需要“$”字符？

【问题讨论】：

您可以使用 Base64 字符串，如：Set Webview2 Source directly to a binary stream 中所述。如那里所述，使用 HTML5 标头。在这种情况下，您可能需要将 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 添加到 <HEAD> -- 不确定 CSS 是如何与此相关的。
查看修改后的 OP。您引用的答案对于在 HTML 中的 IFRAME 环境中嵌入 PDF 非常有用，但对于将图像嵌入到 HTML 中的 IFRAME 中没有信息。尤其是语法：data:Application/pdf.
嗯，您只需要 Base64 转换功能，这是重要的部分。 <IMG> 元素的SRC 属性可以用同样的方法直接设置。 -- 当然你不使用Application/pdf作为mime类型，你可以使用image/png或image/jpeg等。也设置这个值，根据你正在处理的图像的类型（就像其他人一样）。您还可以将所有传入的图像转换为单一格式，例如 PNG（默认格式），因此您不必费心。
顺便说一句，这是非常错误的：Dim bmpBytes() As Byte = ms.GetBuffer()。你需要ms.ToArray()。但是，请改用 ImageConverter 类：例如，只需 return new ImageConverter().ConvertTo(bmp, GetType(byte()))。您可以使用 dim imageFromBytes = DirectCast(New ImageConverter().ConvertFrom(imageBytes), Image) 从字节数组转换回来
删除了大小要求，这就是运行时 HMTL 源代码中的内容：所以看起来还可以吗？ <iframe src="image/png;base64,{imgBase64}"></iframe>

标签： c# vb.net image resources webbrowser-control

【解决方案1】：

感谢@Jimi 的 cmets，我想将讨论浓缩为一个有效的答案。

在代码的某处添加以下函数：

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

接下来，将资源图片（即名为myimage.png的png图片）转换为Base64：

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

最后，将转换后的图像嵌入到 HTML 代码中，例如：

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

【讨论】：

如果你需要 Mime-Type，你可以通过dim mimeType = ImageCodecInfo.GetImageEncoders().FirstOrDefault(Function(enc) enc.FormatID = bmp.RawFormat.Guid)?.MimeType得到它