Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
ajitg_4557
Level 7

issue with base64 encoded image

This is the Api response,which is in base64 encoded format.

{
    "MapFlightResult": "iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAFDUlEQVR4nO3Y32vVdRzH8VMU6Ciq\nO/+EuggCV1CC+asg2JUQRoFFoAv0aGVL15iRM6i70EQhEGqbQtBNQyKSoMi0cmO1jf07fdR5Ou7r\nOUfOGs+vL57wuPjyfX/PeJ5z3nx3zmk0Nu+X/n98gSLxBYrEFygSX6BIfIEi8QWKxBcoEl+gSHyB\nIvEFisQXKBJfoEh8gSLxBYrEFygSX6BIfIEi8QWKxBcoEl+gSHyBIvEFisQXKBJfoEh8gSLxBYrE\nFygSX6BIfIEi8QWKxBcoEl+gSHyBIvEFisQXKBJfoEh8gSLxBYrEFygSX6BIfIEi8QWKxBcoEl+g\nSHyBIvEFisQXKBJfoEh8gSLxBYrEFygSX6BIfIEi8QWKxBcoEl+gSHyBIvEFisQXKBJfoEh8gSLx\nBYrEFygSX6BIfIEi8QWKxBcoEl+gSHyBIvEFisQXKBJfoEh8gSLxBYrEFygSX6BIfIEi8QWKxBco\nEl+gSHyBIvEFisQXKBJfoEh8gSLxBYrEFygSX6BIfIEi8QWKxBcoEl9QW1sON175eMXOY40dR1ds\nH2kMDvN5NccX1NPLY/9tVdWuUXerB76ghtrvVe5Wf/iCGmptz77zAx/NPHJout1Ac7IxNOFu9cAX\n1NDtxRoY/X7TkelN70/e4cj0xubUyjXbRvjaeuILauj2Yj367oWySU++fqJdOVPuWyvXbP+Qr60n\nvqCGdo6uLNbhaRerT3xBDe046mKtFV9QQy7W2vEFNeRirR1fUENlXW7uzcbm9M1vhVN3KN8KD/qt\nsBe+oIYGh2/8RlX2Zmhiw4HJgeZUuw0HvmkMnfB3rB74gnpq7Za/vPeHL6itLrvlVvXEF9RZ2Z7y\nKap85Gq37QO3qje+QJH4AkXiCxSJL1AkvkCR+AJF4gsUiS9QJL5AkfgCReILFIkvUCS+QJH4AkXi\nCxSJL1AkvkCR+AJF4gsUiS9QJL5AkfgCReILFIkvUCS+QJH4AkXiCxSJL1AkvkCR+AJF4gsUiS9Q\nJL5AkfgCReILFIkvUCS+QJH4AkXiCxSJL1AkvkCR+AJF4gsUiS9QJL5AkfgCReILFIkvUCS+QJH4\nAkXiCxSJL1AkvkCR+AJF4gsUiS9QJL5AkfgCReILFIkvUCS+QJH4AkXiCxSJL1AkvkCR+AJF4gsU\niS9QJL5AkfgCReILFIkvUCS+QJH4AkXiCxSp+/jgp+fXD//ktX66zMp7//V3P67TVt36y/zz1zrp\nMlvX+4o3rXBdZi6W+tdl5mKpf11mLpb6xxcoEl+gSJ0GT+0e++HnK0U56OOa6qh6Zs/I6SvXrl/+\n9dpLw5/fe/Hi4iL/qqmnToMzUzPljX9t5PSXkzN9XFMdVc8cP3XxiRcPvbB34uqfc/de/NCzw/yr\npp46Dcq95PGtzfLGl4M+rqmOqmce2LyveGbP8UuXf1v18HJbGj918frc/BvHzpw8++1fs/NvjZ1t\njfhXTT11GiwsLJZ7Q1EO+rimOrrrxUtLS3//s7DlzZOrHr68vLxr/2dPvzpe1ujWwe9/zLZG/Kum\nnjoNyhv52NZmucd0uWN1uaY6uuvFDz83XP4Vlo9Zqx5etufBwRu3tPaD1oh/1dRTp8G5C5d2v/dF\nUQ76uKY6qp55e/xcWazn905U97K6Ri7WfabToHx3++mXq0X3b4Wrrml9AKqOqmfe+eSr2bn5cqb8\ns1v1l12s+x5foEh8gSLxBUr0L7kzp6/i763xAAAAAElFTkSuQmCC"
}



response code=======>>>>>>> 200

remove \n part from encoded base64 string========>>>>

iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAIAAAAiOjnJAAAFeklEQVR4nO3Y7U+VdRzH8aubldLNk1pZW2vrUT2oVeCs2Y0IuWo8qlnmqjU3wAJCBSJyiAMz3WorHrhVgy3hqKuYDdFMlEQz0hKzNv6efp1zoCPXuZFD7HPx2Xt7PTj7/X7n8Aa+u851ThRVNgD/P30BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6AljSF8CSvgCW9AWwpC+AJX0BLOkLYElfAEv6gsRa2xq91JNV82G0vjOruiOqatTnJZy+IJk27PxvquJqu5itEvQFCZR7rWK2yqMvSKC56akfrPjo2O3vp3JVtAxFdX3MVgn6ggSaHayKrtFVbalVO4au0ZZa2TKcPbOuQ1+bTPqCBJodrDu2HQqT9PDm3lxhJVy3smeqP9DXJpO+IIFqurKD1ZpisMqkL0ig9Z0M1mLpCxKIwVo8fUECMViLpy9IoDAu6blZ2ZJKfyocvkb4VNjMp8JS9AUJVNX473dUYW7q+lY0DVW0DOda0XQwquvle6wS9AXJNDdbfPNeHn1BYhWZLaaqJH1BkoXpCXdR4ZYr17p2pqo0fQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS/oCWNIXwJK+AJb0BbCkL4AlfQEs6QtgSV8AS8W3mz8eXDr6Xx5Lp8he+N9/M/LTEk1V5pX1vz+WSJG9Jb2ucNEyV2SPwUL5iuwxWChfkT0GC+XTF8CSvgCWCm281t7/68XLY+PnH9vYXcaZ+Na8lRurGt7rG7j4+/Sx8fNPbuq5ztyH6jo/HTiq/6uhpLyrd1W3njn324Mvd9Q27Ds8emahZ+Jb8ZV7a7c37Rm489nmsHKkwI+Iu6Gy/qbVjfq/GkrKu1rbsH9X/+HM4/HJqVufendBZ+Jb8ZUwIlF6UJ5+u++rIydyX/mRV3aGlZETZ6cuTdfU7zuQGrv0x5W3ug5EXLGWkbyrr27/vGX2I9u3YxP31Gxb0Jn4Vt7DYYBmZmamr1yd91YY1k9PTj3wYnvV5t2Xp/98/PVd929o+3HiQpQerM8GGazlIO9qeHvq/uJQ5vGps4WuWAXPxLfyHg6Xq1vWbH1iU0+48cp95TBY+78eyRwYPZXd+uHkZMRgLSN5V++ubg3XjPte2PHclr3fHf95oWfiW/GVNW/2PvPOnptXNz66sTts5T49DNYnX36feXw0PU9zDxisZaPQRrinCXc2JycuVL6x+zrPhOtQuEMv9PR5K7etbeo/OHr1r7+Pn/7l+S17c1+WwXKgL4AlfQEs6Qvg6B/P4aHfkk3z2AAAAABJRU5ErkJggg==

decoded string in image format========>>>>>>?PNG
?
image url reads========>>>>>>?PNG
?
//Source code for map.........

sub load_Map(json As Object)
json=parseJSON(json)
remove_n=json.MapFlightResult

r = CreateObject("roRegex","\n", "i")
remove_new=r.ReplaceAll(remove_n,"")
print"remove \n part from encoded base64 string ========>>>>"remove_new

mapFileName=""
uri="tmp:/images/"+mapFileName
ba1=CreateObject("roByteArray")
ba1.FromBase64String(remove_new)
mapFileName=ba1.ToAsciiString()
ba1.WriteFile(uri)

print"decoded string in image format========>>>>>>"mapFileName

text = CreateObject("roByteArray")
text.ReadFile(uri, 0, 10000)
img=text.ToAsciiString()
print"image url reads========>>>>>>"img
end sub


why ?PNG is shows whenever i try to print decoded part.
unable to show base64 encoded image on poster node.
can anybody help on this issue.pls let me know.
thanks in advance.
0 Kudos
11 Replies
tim_beynart
Level 7

Re: issue with base64 encoded image

When I tried this a couple years ago, I had to save the decoded image to a tmp file then load that into a poster.  But I don't recall any details, sorry.

also, it looks like you are writing to a file with no name?
mapFileName=""
uri="tmp:/images/"+mapFileName
0 Kudos
renojim
Level 8

Re: issue with base64 encoded image

There are multiple problems here.  As Tim mentioned, you set the file name to an empty string and then append that empty string to your uri variable.  Setting the file name later has no effect on uri (print uri right before your WriteFile and you'll see it's not what you're expecting).  Second, Base64 encoding is used for encoding binary data.  You shouldn't be using the roByteArray functions for Base64 and ASCII for the same data.  It doesn't make any sense.  When you do:
mapFileName=ba1.ToAsciiString()
print"decoded string in image format========>>>>>>"mapFileName

You're seeing random garbage because you're trying to print binary data, not a string.  Although, if you're seeing "?PNG" then that's a good sign since that's that's the first 4 bytes of a PNG (the ? is actually 0x89 which is a non-printable character).

At the beginning of your code you should probably just have
mapFileName = "map.png"

or whatever name you'd like to use.

As for the remove_n part, does the Base64 string returned by the API really contain the character \ followed by the character n or does it contain new line characters (ASCII 10 or hex 0A)?  If it contains new line characters, you don't have to remove them.  If it truly contains \ followed by n then your code to remove them won't work.  You'd need:
r = CreateObject("roRegex","\\n", "")

I'd remove that part of the code until you get the other problems fixed.

Your code is a mishmash of binary and ASCII text roByteArray functions.  Once you decode the Base64 encoded string, trying to print out the result won't show you much since you're trying to print binary data.  You can only display the data as an image, not print it out.

To sum up, try this:
sub load_Map(json As Object) 
  json=parseJSON(json)

  mapFileName = "map.png"
  uri = "tmp:/images/"+mapFileName
  ba1 = CreateObject("roByteArray")
  ba1.FromBase64String(json.MapFlightResult)
  ba1.WriteFile(uri)

  header = CreateObject("roByteArray")
  header.ReadFile(uri, 1, 3)
  print header.ToAsciiString()  '<--- should print PNG
end sub

After you call load_Map, your PNG should be stored in tmp:/images/map.png.  You should then be able to use tmp:/images/map.png as the URI for a poster.

You're real problem is probably what Tim pointed out - you're not saving the image data to a file properly.

-JT
0 Kudos
ajitg_4557
Level 7

Re: issue with base64 encoded image

Let me try your suggest way.
thanks for your instant reply renojim and tim_beynart.
0 Kudos
ajitg_4557
Level 7

Re: issue with base64 encoded image

Telnet response:-
response code=======>>>>>>> 200
ba1.WriteFile====>>>>false
header.ReadFile=======>>>>>false
header string====>>>>

if successfully written at given location  uri = "tmp:/images/"+mapFileName then ba1.WriteFile should print "true".but here we get false on telnet response.
that why readfile also print false.because writefile function not worked.
sub load_Map(json As Object) 
   json=parseJSON(json)
   mapFileName = "map.png"
   uri = "tmp:/images/"+mapFileName
   ba1 = CreateObject("roByteArray")
   ba1.FromBase64String(json.MapFlightResult)
   print"ba1.WriteFile====>>>>"ba1.WriteFile(uri) 
   
   header = CreateObject("roByteArray")
   print"header.ReadFile=======>>>>>"header.ReadFile(uri, 1, 3)   
   print"header string====>>>>"header.ToAsciiString()  '<--- should print PNG
end sub


should we have to try these two function or not..for reading and writing purpose.

thanks renojim..
0 Kudos
renojim
Level 8

Re: issue with base64 encoded image

Have you previously created the tmp:/images directory?  If not, the WriteFile will probably fail.  Add
CreateDirectory("tmp:/images")

somewhere in your code.  You could put in your load_Map routine since trying to create it more than once won't really hurt anything, but it should probably go wherever you do other initialization type stuff since it only has to be created once.

No, you don't want to use the ASCII versions of read/write file.  You'd use those if you were handling strings.  A PNG isn't a string, it's binary data (most of which is non-printable).

-JT
0 Kudos
ajitg_4557
Level 7

Re: issue with base64 encoded image

thanks to renojim,i think we are a few step behind to success.
i am getting still some issues,let me guide again on behalf of below snippet of code.

now i am appending some snippet of code,please look in it:-
Homescreen.xml

<field id="Map" type="string" />


Homescreen.brs

sub load_Map(json As Object) 
   json=parseJSON(json)   
   CreateDirectory("tmp:/images")   
   mapFileName = "map.png"
   uri = "tmp:/images/"+mapFileName
   print"Image Url----->"uri   
   ba1 = CreateObject("roByteArray")
   ba1.FromBase64String(json.MapFlightResult)
   print"ba1.WriteFile====>>>>"ba1.WriteFile(uri)   
   header = CreateObject("roByteArray")
   print"header.ReadFile=======>>>>>"header.ReadFile(uri, 1, 3)   
   print"type of header string Data====>>>>"type(header.ToAsciiString())  '<--- should print PNG     
   m.top.Map=header.ToAsciiString()  '<--- should print PNG
end sub

Telnet response of above portion:-
Image Url----->tmp:/images/map.png
ba1.WriteFile====>>>>true
header.ReadFile=======>>>>>true
type of header string Data====>>>>String


MainScene.xml

<field id="goFlight_Info" type="bool" alias="Homescreen.goFlight_Info" onchange="show_nextScreen" />



Mainscene.brs

//On button click this function is called.
sub show_nextScreen()
print"second screen=========>>>>>>>>"
m.Flight_Info.Flight_Node=m.Homescreen.Flight_Node
m.Flight_Info.Map=m.Homescreen.Map
m.Homescreen.setFocus(false)
m.Homescreen.visible="false"
m.Flight_Info.visible="true"
m.Flight_Info.setFocus(true)
end sub


Flightinfo.xml

<field id="Map" type="string" />

<Poster
   id="Map"
   translation="[780,150]"
   width="250"
   height="250"
   visible="true"
/>


Flightinfo.brs

'On show content function,i am fetching content like this on poster node:-

m.Map.uri=m.top.Map
print"m.top.Map======>>>>"m.top.Map

Telnet response on Flightinfo screen:-
second screen=========>>>>>>>>[/color]
*** ERROR: Missing or invalid PHY: 'PNG'
*** ERROR: Missing or invalid PHY: 'PNG'[/font]

m.top.Map======>>>>PNG

Note
:-all these below step i tried on Homescreen.brs, within loadmap routine:-

we have also try to read,
print"header.ReadFile=======>>>>>"header.ReadFile(uri, 1, 3)  it gives only===>>>>'PNG'

and whenever we try this one,
print"header.ReadFile=======>>>>>"header.ReadFile(uri, 0, 3)  it gives only===>>>>'?PNG'

and whenever we try this one,
print"header.ReadFile=======>>>>>"header.ReadFile(uri, 0, 100000) 
 it gives only===>>>>'?PNG?'

thanks & regards
Ajit pathak
0 Kudos
Roku Employee
Roku Employee

Re: issue with base64 encoded image

"ajitg_4557" wrote:
thanks to renojim,i think we are a few step behind to success.
i am getting still some issues,let me guide again on behalf of below snippet of code.


You are assigning the file data (binary incorrectly interpreted as string) to m.top.Map which in turn gets assigned to m.Map.uri.
It looks like you mean to assign the URI from the uri variable there instead.
0 Kudos
ajitg_4557
Level 7

Re: issue with base64 encoded image

I have already tried type ="uri".
<field id="Map" type="uri" />


instead of this.
<field id="Map" type="String" />

but still, the image not rendered. :shock:

thanks for your reply "RokuKC".
0 Kudos
ajitg_4557
Level 7

Re: issue with base64 encoded image

hi, guys make me understand, my problem does not solve yet.
if anyone already did this part so please clear the concept on this issue.
0 Kudos