[Solved] how do I base64 encode an image?

Hello,

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

Thank in advance

Best regard

3 Likes

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

Hello,

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

Best regard

Ah but we were soooo close:

2 Likes

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

See this image in the Drag and Drop Blocks screen
image

@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

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

@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

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


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

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

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

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.

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

thank in advance

best regard

1 Like

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

3 Likes

Love this!!!

1 Like

Thank you but it is not that I would like

thank for your time

best regar

1 Like

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

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

1 Like