[Solved] how do I base64 encode an image?

Questions about Thunkable
,
1

Hello,

Do you know when “base64 encoding" will be available in thunkable drag and drop?

Thank in advance

Best regard

3 Likes
2

Hi @stephane_golonkaa71!

I don’t think this feature will be available soon in Thunkable for now. But let’s hope it does. I’d like to show you a work-around to this, which is like -

  • create an html file named ‘encode.html’ in (any preferred editor) with this code -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
var ThunkableWebviewerExtension = {
    postMessage: function (message) {
        if (window.ReactNativeWebView) {
            window.ReactNativeWebView.postMessage(message);
        } else {
            window.parent.postMessage(message, '*');
        }
    },
    receiveMessage: function(fxn) {
        var callbackFunction = function(event) {
            if (typeof fxn === 'function') {
                fxn(event.data)
            }
        };
        document.addEventListener('message', callbackFunction, false);
        window.addEventListener('message', callbackFunction, false);
    }
}
</script>
</head>
<body>
<script type="text/javascript">
var test;
var value;
ThunkableWebviewerExtension.receiveMessage(function(message) {
    value = message;
    encoded = btoa(value);
    ThunkableWebviewerExtension.postMessage(encoded);
});
</script>
</body>
</html>
  • upload this file into assets of your project, and add a webviewer to your project.
  • set the webviewer’s url in designer properties to ‘encode.html’ (just the file’s name)
  • now on the blocks side, use this block to post data to the file - (message = whatever you want to encode)
    image
  • and this block to retrieve the encoded value -
    image

Now you have your own Base64 encoder in your app. Let me know if this works for you. :+1:

P.S. don’t get thrown off by the html code, it is a very simple process :wink:

2 Likes
3

Hello,

Thank for your answer but I don’t want to convert text to base64, I would like convert an image

Best regard

4

Ah but we were soooo close:

2 Likes
5

thank for your answer but I don’t find Camera and Media drawer, I have just Camera and there isn’t base64 encoding

thank in advance

Best regard

1 Like
6

See this image in the Drag and Drop Blocks screen
image

7

@stephane_golonkaa71 Sorry for the confusion. The block had been added but is no longer available. I just meant that it seemed they had figured it out at one point so hopefully they can add it back in soon.

@muneer Does the “any type of file from device” block convert images to base64? I actually need that for an app I’m making, too.

1 Like
8

Very close to Base64. It returns a blob which you can use as image and you can save too.

If you want a Base64 string then I made a demo app to read the file and provide the Base64 value of it,

https://x.thunkable.com/projectPage/61f68431c3761001dba12df1

2 Likes
9

@muneer created this demo when i was trying to help someone with ximilar issues:
https://x.thunkable.com/projectPage/61f68431c3761001dba12df1

it assumes you want to convert an image to base64 so it starts with a file picker , when you click on it - it asks if you want to get image from storage or camera. in either case, it returns the image in base64 format.

1 Like
10

@tatiang I must’ve missed that post. Glad to hear we are getting closer to it :)

11

Hello,

Thank you for your demo which is very interesting but I can’t manage to adapt it to postmessage image on the web_viewer to receive in base64

Best regard

Capture
Capture719×455 23.4 KB

12

Someone can correct me if I’m wrong but I believe that website/script only works for images immediately uploaded from a device. I’m also looking for a way to convert an image from a green Photo block or url to base64.

1 Like
13

I can change the script to convert image from URL. The script should also work with images from the camera which should substitute the green photo block.

1 Like
14

Thanks, @muneer! Ximilar can classify images or image urls using AI but to show a heat map of how the AI engine works, it requires a base64 image format.

15

Thank, yes the script should also work with images from the camera

thank in advance

best regard

1 Like
16

I updated the project and included a Text Input to supply your own image URL. It should now generate Base64 string from URL. However, if there is a CORS restriction from the server side (the site the image is saved in) then the Base64 generation will fail.

I tried this URL https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0

image
image314×543 58.9 KB

3 Likes
17

Love this!!!

1 Like
18

Thank you but it is not that I would like

thank for your time

best regar

1 Like
19

I’m not sure what you are looking for but you have the project and the HTML files and you are free to do you own modifications.

Should you think I can help you in some changes, you need to explain it clear and I will see what I can do.

1 Like
20

Hello,

Thank your for your help it is very nice but I don’t speak english very well so it’s difficult for me to explain. I would like to convert an image from camera or device or canvas to base64 format.I don’t mind using multiple web_viewer.But I don’t want select image via web_viewer. Maybe with the image in attachment it will more clear.

Thank in advance

Best regard

Sans titre
Sans titre1117×1166 87.1 KB

1 Like