[Solved] how do I base64 encode an image?

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