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.
-
Welcome to B4X forum!
B4X is a set of simple and powerful cross platform RAD tools:
- B4A (free) - Android development
- B4J (free) - Desktop and Server development
- B4i - iOS development
- B4R (free) - Arduino, ESP8266 and ESP32 development
Data URI Scheme: displaying a base64 encoded image string
- Thread starter TBose
- Start date
- Similar Threads Similar Threads
Here:
B4X:
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
Upvote
0
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.
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:
<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>
Upvote
0
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.
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.
B4X:
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
Upvote
0
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
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
Upvote
0
Hello there
Do you find solution for this post ?
I have the same problem
Any responce ...
Upvote
0
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
to convert to Base64.
as Erel already said,
B4X:
"/>
</body>
</html>as Erel already said,
You can do the following things:
- 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)
- Use the jSoup HTML Parser library (best bet because Jsoup can return the Base64 image stringeven in complex HTML pages)
Upvote
0
- Status
Similar Threads
- Article
B4A Library
AndroidNetUri Library
- Article
