Load Base 64 String into a Picture Box

1

Hoping someone can help, I’m going around and around in circles trying to get this to work.

I’m retrieving a Base 64 Image from my database, I know the string is correct because I can use online decoders to correctly see the picture.

I’ve tried many things including but not limited to what I’ve found here:

https://discuss.appstudio.dev/t/load-base64-to-image/793

https://wiki.appstudio.dev/PictureBox

https://blog.appstudio.dev/2011/03/images-in-strings-and-base64/

According to the docs, I should be able to just use picb.addImage(s) where picb is my picture box and s is the base 64 string. Looking at the first link, I’m not sure if I need to decode the string or not - I’ve tried both ways with no luck.

Any suggestions?

1 Like
2

Do you have a sample of the base64 string / file? It could be there are special characters being embedded that prevent it from being streamed.

3

base64img.zip (79.7 KB)

I use Convert Base64 to JPEG – Online JPG Tools to view this file.

4

I tried your string in both an Image and a PictureBox:

04%20PM
Screen Shot 2020-01-08 at 6.15.04 PM.png340×527 129 KB

1 Like
5

Any chance you could show me exactly what code you are using? I’ve tried about 6 different ways, and it’s just not working. Not sure where I’m going wrong.

6 
If req.status = 200 Then
  r = req.responseText
    'MsgBox(r, vbOKCancel)
 pbScore.getContext("2d")
 pbScore.addImage(r)
  
Else
    MsgBox ("ERROR:  Refresh couldn't reach the server")
End If

This is what I have so far, and it’s not working. If I uncomment the MsgBox I do get the full base 64 string required.

7

If you are downloading the image then the base 64 string may not be fully downloaded just yet. Add a pause or a way to ensure it has fully downloaded. Try a smaller file size and see.

8

It’s fully downloaded - I can send the string to a msgbox or print it, then copy and paste it to the website I mentioned above and it decodes fine.

9

I should mention, this is stored in a database, I’m accessing the string via a php script and ajax. So there should be no way I’m getting partial data.

10

Ah yes…you did. Hmmmm…can you test out the string by hard coding the base64 string to the r variable? If that works it could be the string maybe introducing characters that are stripped out when passed to the msg box.

11

That was my next idea. I’ll give it a go when I’m back from work tonight.

12

I put the string into a file called base64img.js like this:

x = "data:image/png;base64,iV..."

I then dragged and dropped the file into a copy of the Base64Image sample’s folder.

I made one change to the code in Form1:

reddot = x

38%20AM
Screen Shot 2020-01-09 at 8.16.38 AM.png788×538 98.4 KB

13

@John73 hopefully that’s it.

.

14

So after much mucking about, and having not touched this code in the last 6 weeks, I’ve finally got it working - thanks to everyone that helped.

The final solution, and I still don’t really understand the under the hood workings was adding an ImageBox and then using the following code (ignore the req.status etc if you aren’t obtaining your picture data via an Ajax call):

   If req.status = 200 Then
        r = req.responseText
        Image1.innerHTML = "<img src='" & r & "'>"
        pb = pbScore.getContext("2d")
        pb.addImage(r)
    Else
        MsgBox ("ERROR:  GetPicture couldn't reach the server")
    End If
15

You probably don’t need this line:

Image1.innerHTML = "<img src='" & r & "'>"

(Unless you have a separate control called Image1 which you also want to display the image in)

16

Having trouble pulling base64 code from a databas and showing it in either a picture box or an image. I used this code after making sure the image was being returned from the database (see picture). No image displayed in either control. Thoughts?
22

 if (req.status == 200) { //everything worked. 
    results = req.responseText
    Image2.innerHTML = "<img src='" + results + "'>"
    let pb = pbImageDB.getContext("2d")
    pb.addImage(results) 
    } else {
          //Handle that. 
          txtImageUploadInfo.value = "Error: " + req.status
    }
17

The problem is either in your code or the Base64 string.

There is a sample called Base64Image. You could try using the string in reddot in your code to see if your code is working properly.