Data URI Scheme: displaying a base64 encoded image string

[TBose]

Given a string variable containing a base64 encoded image, as a data URI (see Data URI scheme - Wikipedia, the free encyclopedia), how do I display it? A simple example will do.

 

[Erel]

Here:

Sub Base64StringToImage(s As String) As Bitmap
   Dim su As StringUtils
   Dim bytes() As Byte = su.DecodeBase64(s)
   Dim In As InputStream
   In.InitializeFromBytesArray(bytes, 0, bytes.Length)
   Dim bmp As Bitmap
   bmp.Initialize2(In)
   In.Close
   Return bmp
End Sub

 

[TBose]

Sorry. It didn't work, and it is not as simple as stripping out the encoded part in the data uri string.

The image decoder in a browser knows how to naturally display images of different mime types.

So, I modified the server to send down a test data uri string for a small jpeg image, which I captured and placed in the following html code for testing.

<html>
<body>
<img id="hbar" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA+Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBkZWZhdWx0IHF1YWxpdHkK/9sAQwAIBgYHBgUIBwcHCQkICgwUDQwLCwwZEhMPFB0aHx4dGhwcICQuJyAiLCMcHCg3KSwwMTQ0NB8nOT04MjwuMzQy/9sAQwEJCQkMCwwYDQ0YMiEcITIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy/8AAEQgAAgAkAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A5qiiivTP2gKKKKACiiigD//Z"/>
</body>
</html>

 

[TBose]

OK Erel. I worked through the test to prove that your code works and to better identify any issue to be addressed. Of course, your code works. But I do not know how to determine if the data was valid.

So far, I have the following code to take in a standard data URI string for an image. But it does not check to see if the image data is supported. I think any image library or component should support an equivalent method and be able to throw an error when the mime type and/or data is not supported or not valid.

I will leave this for your consideration and discretion. Thank you for your time and patience with this matter.

Sub ImageUri(uri As String) As Bitmap
   Dim s As String
   Dim n As Int
   n = uri.IndexOf(",")
   If n < 0 Then
      s = uri
   Else
      s = uri.SubString(n+1)
   End If
   Dim su As StringUtils
    Dim bytes() As Byte = su.DecodeBase64(s)
    Dim In As InputStream
   In.InitializeFromBytesArray(bytes, 0, bytes.Length)
    Dim bmp As Bitmap
    bmp.Initialize2(In)
    In.Close
    Return bmp
End Sub

 

[Erel]

I'm not sure that I understand. An error will be raised if the data is not valid.

 

[TBose]

Ok. Anyone using this code should remember to wrap it in a Try/Catch block.

Finally, thank you Erel for your help in this matter.

 

[phukol]

I would like to add something on this post if in case anyone has encountered the same issue. When using Erel's code or the Base64Image library im getting the error
Bad Base64 input character decimal

but when i tried TBose'code it was able to load my image inside the imageview. Can anyone enlighten me how come this is happening. Im using Android API 14

 

[Erel]

You need to first find the base 64 string. TBose code parses the uri based on the first comma.

 

[phukol]

You need to first find the base 64 string. TBose code parses the uri based on the first comma.

/thanks

 

[dws]

I would like to add something on this post if in case anyone has encountered the same issue. When using Erel's code or the Base64Image library im getting the error
Bad Base64 input character decimal

but when i tried TBose'code it was able to load my image inside the imageview. Can anyone enlighten me how come this is happening. Im using Android API 14

Hello there
Do you find solution for this post ?
I have the same problem
Any responce ...

 

[MicroDrie]

I think that there is a mistake in string handling. The input for the Base64Image is the HTML page. From this page the start is remove. The real Base64 string is the string between both double quote characters. However the part from the second double quote character is still there at the end of the uri string. The Base64 string conversion routine doesn't know where to stop so it tries also the double and the rest of the HTML page, that is

"/>
</body>
</html>

to convert to Base64.
as Erel already said,

An error will be raised if the data is not valid.

You can do the following things:

1. Read the uri string backwards to find the end of the Base64 characters and remove them if you want to test it (by the way you had to add additional program code, can be hard to make it full proof if the page content is complexer then your example)
2. Use the jSoup HTML Parser library (best bet because Jsoup can return the Base64 image stringeven in complex HTML pages)