Hi there!
Is there a way to embed an image into the FormattedTextEditInfo of an UltraFormattedTextEditor in a way, that the outcoming Data is valid html?
Because if I choose 'Embed image data in xml' it gives me an image tag, with a data attribute where the image is embedded in binary format, but which my browser won't display.
Is it possible to tweak Settings of the UltraFormattedTextEditor to make the outcoming xml valid to display properly in browsers? Or are there any other ways?
Can someone here give me a hint?
GuidoKoehler said: Hi there! Is there a way to embed an image into the FormattedTextEditInfo of an UltraFormattedTextEditor in a way, that the outcoming Data is valid html? Because if I choose 'Embed image data in xml' it gives me an image tag, with a data attribute where the image is embedded in binary format, but which my browser won't display. Is it possible to tweak Settings of the UltraFormattedTextEditor to make the outcoming xml valid to display properly in browsers? Or are there any other ways? Can someone here give me a hint?
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.
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.
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"] 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
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".