How to convert image path to base64 in nativescript?

Question

I am working on nativescript and unable to convert local image path to base 64 in native script.

private startSelection(context) {

    let that = this;  

    context
    .authorize()
    .then(() => {
        that.imageAssets = [];
        that.imageSrc = null;
        return context.present();
    })
    .then((selection) => {

        //console.log("Selection done: " + JSON.stringify(selection));
        that.imageSrc = that.isSingleMode && selection.length > 0 ? selection[0] : null;
        //console.log( "Hello skdafyvsoa ydfs98a698d8s9" + JSON.stringify(that.imageSrc)); 

       // var base64 = that.imageSrc._android.toBase64String();
        // var base64 = that.imageSrc._android;
        const image = that.imageSrc._android;
        //const imageAsBase64 = image.toBase64String(enums.ImageFormat.png);
        //var data = base64Img.base64Sync(image);
        // console.log(data);

        // set the images to be loaded from the assets with optimal sizes (optimize memory usage)
        selection.forEach(function (element) {
            element.options.width = that.isSingleMode ? that.previewSize : that.thumbSize;
            element.options.height = that.isSingleMode ? that.previewSize : that.thumbSize;
        });

        that.imageAssets = selection;
        this.checkFileupload = true; 
    }).catch(function (e) {
        console.log(e);
    });
}

Please help for this code

_handleReaderLoaded(readerEvt) {
    var binaryString = readerEvt.target.result;

    console.log(binaryString);
           this.base64textString= btoa(binaryString);
           console.log(btoa(binaryString));
   }

I am using angular 6 with native script and want to convert image to base64 and save into the database fro backend i am using sql server.

to use the atob() and btoa() methods in nativescript, you will need to write your own functions as they dont exist — mast3rd3mon, Jan 11 '19 at 12:51
Are you trying to convert the image to base64 or just its path? You are not supposed to store the path as it's not guaranteed it will be valid for ever, user could delete it any time. In case of iOS, it will not be a file but a PHAsset, so you won't even have a path there. — Manoj, Jan 11 '19 at 13:58

score 0 · Answer 1 · answered Jan 11 '19 at 14:30

You are using the nativescript-imagepicker plugin which returns ImageAsset. As mentioned in the comments the paths that you are receiving are not direct references to the images. So to send a base64 representation of the actual image you need to create it and then decode it. Here is how to do it on Android.

selection.forEach(element => {
      let asset: ImageAsset = element;

      // if Android
      asset.getImageAsync((bitmap) => {
          console.log(`android.graphics.Bitmap: ${bitmap}`);

          let byteArrayOutputStream = new java.io.ByteArrayOutputStream();
          bitmap.compress(android.graphics.Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
          let byteArray = byteArrayOutputStream.toByteArray();
          console.log(`byteArray: ${byteArray}`); // BASE64
    });
});

Notice that I am accessing the native Android API and the java namespace. In TypeScript, you will need an explicit typing for all declared variables so you need to explicitly declare your need to declare your java and android variables.

// somewhere at the beginning of the file
declare let android: any; // or use tns-platform-declarations
declare let java: any;

For the Android and iOS APIs, you can also use tns-platform-declarations (that's even the better and recommended approach) but you still need to declare your java variable as shown above

Its not showing the base64 string its showing the byte array and its not the image base64. — himanshuj, Feb 02 '19 at 08:24
The byte array is the binary representation which can be easily turned to a string (the actual output is pretty much the same). Look for the Java 8+ example in the following link https://stackoverflow.com/a/33552306/4936697 — Nick Iliev, Feb 04 '19 at 08:00
its looks exactly like what i am looking for, but why is it giving me just 9 charcters? — oded bartov, Nov 03 '20 at 11:11

How to convert image path to base64 in nativescript?

1 Answers1