Kindly help me with a getImageFromBase64(base64) workink example

How-to Discussions
1

I’m a Fuse really really absolute beginner and I have basic knowledge of Javascript too, but I really want to make an app with Fuse and I’m doing all my best to learn.

I would like to display (list) some JSON data. I used as code the example in the “Fetching and displaying data” video tutorial. The problem I’m trying to solve is that my JSON data has Base64 encoded images that I would like to display but I don’t understand how to use getImageFromBase64(base64).

The Base64 string is saved in the imageencoded JSON key and it has the prefix string data:image/png;base64, or data:image/jpg;base64,.

This is my .unoproj file:

{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.ImageTools" 
  ],
  "Includes": [
    "*"
  ]
}

And this is the code:

<App>
    <DockPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");
            var Image = require("FuseJS/ImageTools");
 
            var imageencoded = Observable();
            var title = Observable();
            var errorMessage = Observable("");

            fetch("http://www.triestenascosta.it/data.json")
                .then(function(result) {
                    if(result.status !== 200){
                        errorMessage.value = "Error " + result.status;
                            return;
                        }
                        result.json().then(function(data){						
                            for(var i = 0; i < 10; i++){
                                var item = data[i];
                                title.add(item);
                                imageencoded.add(item);
                            }
                       });
                 }).catch(function(error) {
                     errorMessage.value ="Oh no!";
                 });
             module.exports={
                  title: title,
                  imageencoded: imageencoded,
                  errorMessage: errorMessage
             };
        </JavaScript>
        <StatusBarBackground DockPanel.Dock="Top" />
        <Text TextColor="#a94442" Value="{errorMessage}" Alignment="Center" />
        <ScrollView ClipToBounds="true">
            <StackPanel>
                <Each Items="{title}">
                     <DockPanel Margin="0, 0, 0, 10">

                         <Text Value="{title}" TextWrapping="Wrap" Alignment="CenterLeft" Margin="10" />
                     </DockPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
</App>

Would you kindly add the getImageFromBase64(base64) part of code so that I understand how it works and how Javascript promises work?

I did add something like this var Image = require("FuseJS/ImageTools"); but after this I really don’t know how to continue.

P.S. The example of the video tutorial works perfectly in local preview, but it does not on my Samsung S3 Mini (Android 4.4), nor on my Huawei Honor 7 (Android 6) as the image placeholders are not displayed. Locally the preview correctly shows the square image placeholders and the list of strings, but on the devices only the list of strings is shown.

Many thanks

2

Hey Enrico, the imagetools api needs a doc update with examples for sure.

In short though, here’s how you use it:

var ImageTools = require('FuseJS/ImageTools');
ImageTools.getImageFromBase64(myBase64ImageString).then( function(image) {
  // If the b64 was valid, the image object you get here will contain a path you can use to display 
  myDisplayFunc(image.path);
});
3

Hi Andreas and thank you for replying.

As said I’m an absolute beginner so I’m asking your help a little more. There are a number of things I don’t understand.

  • I don’t understand where should I add your code. I added in the FOR - LOOP (see my code above) is this correct?
						for (var i = 0; i < 10; i++){
							var item = data[i];

							title.add(item);

							ImageTools.getImageFromBase64(imageencoded.add(item)).then(function(image) {
								var img = image.path;
							});
							
						}

I used imageencoded.add(item) as the variable that has the base64 string (because imageencoded is the json key that has the base64 value).

  • I don’t understand what is the image.pathyou mention for. Why do I need a path when I have a base64 string?
  • You use a myDisplayFunc(image.path) function that I absolutely don’t know how to code it so I used the one made by Anders found here. Can I use this code for my job? I created a new file such as base64.uno and then Included in the .unoproj file as follows:
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.ImageTools",
    "Uno.Geometry",
    "Experimental.TextureLoader" 
  ],
  "Includes": [
    "*",
    "base64.uno"
  ]
}

I added also "Uno.Geometry" and "Experimental.TextureLoader" as written by Anders.

Then I changed MainView.ux as follows:

					<DockPanel Margin="0, 0, 0, 10">
						<Image>
					        <Base64ImageSource Base64="{imageString}" />
					    </Image>
						<Text Value="{title}" TextWrapping="Wrap" Alignment="CenterLeft" Margin="10" />
					</DockPanel>

But - of course - nothing works! I know there are a lot of mistakes. Would you kindly help me to fix them?

4

I just tested and it might be a bug in the implementation. I will get back to you.