I'm bringing this thread back from the dead because I recently had a similar issue.

We needed a way to edit e-mails in our application before sending them out. E-mails are (usually) HTML based. Everything was working, except the embedded images.

I did a bunch of reverse engineering and have written a couple of procedures below to convert the Infragistics XML format into valid XHTML with embedded image data. It'll scan the XML DOM, looking for tags with embedded image data, and convert them into XHTML-friendly tags.

Imports Infragistics.Win.FormattedLinkLabel
Imports System.Xml
Imports System.Runtime.Serialization.Formatters.Binary
Imports System.IO
Imports System.Drawing.Imaging

    Public Function GetHtml(strEditorValue As String) As String
        Dim xdDocument As New XmlDocument

        ' Load the XML data
        xdDocument.LoadXml(strEditorValue)

        ' Convert images to HTML-friendly data
        Call ConvertImageData(xdDocument.DocumentElement, xdDocument)

        ' Return the converted XML document
        Return xdDocument.OuterXml
    End Function

    Private Sub ConvertImageData(xnNode As XmlNode, xdDocument As XmlDocument)
        Dim xeElement As XmlElement
        Dim strData As String
        Dim xaAttribute As XmlAttribute

        If TypeOf xnNode Is XmlElement Then
            xeElement = DirectCast(xnNode, XmlElement)

            ' Is this an 

 tag?
            If xeElement.Name = "img" AndAlso xeElement.HasAttributes AndAlso xeElement.Attributes("data") IsNot Nothing Then
                ' Make sure there is no src="" attribute.
                If xeElement.Attributes("src") Is Nothing Then
                    ' Get the data="" value
                    strData = xeElement.Attributes("data").Value

                    ' Convert to HTML-friendly format
                    strData = ConvertImageDataToHtml(strData)

                    ' Remove data="" attribute
                    xeElement.Attributes.Remove(xeElement.Attributes("data"))

                    ' Add src="" attribute
                    xaAttribute = xdDocument.CreateAttribute("src")
                    xaAttribute.Value = strData
                    xeElement.Attributes.Append(xaAttribute)
                End If
            End If

            ' Recurse through any children
            If xeElement.HasChildNodes Then
                For Each xnChild As XmlNode In xeElement.ChildNodes
                    Call ConvertImageData(xnChild, xdDocument)
                Next
            End If
        End If
    End Sub

    Private Function ConvertImageDataToHtml(strData As String) As String
        Dim abytData() As Byte
        Dim bfFormatter As New BinaryFormatter
        Dim objValue As Object
        Dim abytConverted() As Byte

        ' Decode the Base64 encoded .NET object bytes
        abytData = Convert.FromBase64String(strData)

        ' Load the decoded bytes, and deserialize to an actual .NET object
        Using msStream As New MemoryStream(abytData)
            objValue = bfFormatter.Deserialize(msStream)
        End Using

        ' Determine the type of image that was stored.
        If TypeOf objValue Is Image Then
            ' Data is an Image type
            Using msStream As New MemoryStream
                DirectCast(objValue, Image).Save(msStream, ImageFormat.Png)
                abytConverted = msStream.ToArray()
            End Using

            Return "data:image/png;base64," & Convert.ToBase64String(abytConverted)
        ElseIf TypeOf objValue Is Bitmap Then
            ' Data is a Bitmap type
            Using msStream As New MemoryStream
                DirectCast(objValue, Bitmap).Save(msStream, ImageFormat.Png)
                abytConverted = msStream.ToArray()
            End Using

            Return "data:image/png;base64," & Convert.ToBase64String(abytConverted)
        Else
            ' Data type is unknown. Don't change it.
            Return strData
        End If
    End Function

Hope this helps.

EDIT: Had "image/jpeg" instead of "image/png".

Torrey Betts"]

The replacement of the string I mentioned does turn it into valid html, but after some further investigation I found that the base64 string that holds the embedded image contained a header of sorts before the actual start of the image file.

This boils down to the image not appearing as a valid image during the decoding process in a web browser or any other control or application that processes html.

Since I extensively researched this, I'm going to see if it'll be possible to get this issue solved for a future release. It's an extremely easy fix, and would benefit a lot of users because of the added functionality it offers. If there is any updates regarding this issue, I'll post a reply here.

On another note, when it comes to image file sizes that get embedded in html, the smaller the file the better. If you have a large file there's a possibility the image will only render half way. By that, I mean only the first half of the image will appear. I'm not completely sure what causes this, but have witnessed the behavior during testing when developing software.

Hi Torrey!

Looking forward to see that fix implemented!

Best Regards,

Guido

The replacement of the string I mentioned does turn it into valid html, but after some further investigation I found that the base64 string that holds the embedded image contained a header of sorts before the actual start of the image file.

This boils down to the image not appearing as a valid image during the decoding process in a web browser or any other control or application that processes html.

Since I extensively researched this, I'm going to see if it'll be possible to get this issue solved for a future release. It's an extremely easy fix, and would benefit a lot of users because of the added functionality it offers. If there is any updates regarding this issue, I'll post a reply here.

On another note, when it comes to image file sizes that get embedded in html, the smaller the file the better. If you have a large file there's a possibility the image will only render half way. By that, I mean only the first half of the image will appear. I'm not completely sure what causes this, but have witnessed the behavior during testing when developing software.

Torrey Betts said:

Can you give a little more information about how you're using the UltraFormattedTextEditor?

One way out of many to achieve what you're asking would be to copy the Value of the editor to a string variable, and then:

 

Search for: data="

Replace with: src="data:image/jpg;base64,

Then your image tag should be valid html. Although, you may encounter problems displaying the image if it's in a file format other than JPG, since it is what we specified the data to be.

 

Note: Replacing what I mentioned above will cause the display of the image in the UltraFormattedTextEditor to become invalid, so you'd have to search and replace in the opposite direction if you wanted to the put the value back into the editor.

Hi, Torrey!

Im using the UltraFormattedTextEditor quite simple. I'm opening the Insert Image Dialog from the context menu, and in the dialog checking 'embed image in xml', to generate the image tag with the data=" attribute.

For testing purposes, i have implemented a second form with a WebBrowser Control to display the formatted text of the UltraFormattedTextEditor, after replacing data=" with src="data:image/jpg;base64, but the WebBrowser Control wont display the image.

Also if I save the Source of the WebBrowser Control as html File and open it in a WebBrowser (e.g. IE9) the image is not loaded.

So I would guess, the Html is not valid.

Bye the way: The image is a 197Kb jpg, I hope the size is  not the problem?

Ciao,

Guido.