image to base64 on nativescript 7

[megatdaharus]

hi..

i try to convert result to base64, is is my code

getMyDrawing() { const pad = this.DrawingPad.nativeElement; pad.getDrawing().then((data) => { let image = ImageSource.fromResourceSync(data); let image64 = image.toBase64String('png'); }, (err: any) => { console.log(err); }); }

error message

ERROR Error: Uncaught (in promise): Error: JNI Exception occurred (SIGABRT).

thank you

[bradmartin]

Can your print out the data and confirm what it is?

[seankonig]

Hi, yep this is crashing my app as well. Also running ns7, my app specifically crashes and closes after this line

image = ImageSource.fromResourceSync(data)

I have also tried:

const pad = this.DrawingPad.nativeElement;

        pad.getDrawing()
            .then(
                (data) => {
                    console.log(data);
                    ImageSource.fromData(data)
                        .then((res) => console.log(res))
                        .catch((error) => console.log(error));
                    // let image64 = image.toBase64String('png');
                },
                (err) => {
                    console.log(err);
                }
            )
            .catch((e) => console.log(e));

Just crashes
No output or errors though. In my case, the data value is android.graphics.Bitmap@4034c7f

Anything else I can try?
Thanks for the cool plugin

[bradmartin]

This def worked at one time 😕 because it was in the demo app and working fine to show the captured image into Image view in NS after the conversion from bitmap. Not sure what changed.

[seankonig]

Well, the ImageSource does not have a fromResourceSync() method. Could it have to do with how we get it?

[bradmartin]

Yea... fromResource... was for app_Resource images - https://github.com/NativeScript/NativeScript/blob/b8d828bef93154db338939afd9ae4781097fd851/packages/core/image-source/index.android.ts#L96 you can see the source on android grabbing the resources here so in this instance we have the Bitmap already so fromDataSync() looks to be what you would use.

Try using https://github.com/NativeScript/NativeScript/blob/master/packages/core/image-source/index.android.ts#L152 fromDataSync()

[bradmartin]

Ah... I see the issue now.

2021-01-13 09:55:48.547 4802-4802/org.nativescript.demo E/tivescript.dem: JNI ERROR (app bug): attempt to pass an instance of android.graphics.Bitmap as argument 1 to android.graphics.Bitmap android.graphics.BitmapFactory.decodeStream(java.io.InputStream)
2021-01-13 09:55:48.559 4802-4802/org.nativescript.demo A/tivescript.dem: java_vm_ext.cc:542] JNI DETECTED ERROR IN APPLICATION: bad arguments passed to android.graphics.Bitmap android.graphics.BitmapFactory.decodeStream(java.io.InputStream) (see above for details)
2021-01-13 09:55:48.559 4802-4802/org.nativescript.demo A/tivescript.dem: java_vm_ext.cc:542]     from java.lang.Object com.tns.Runtime.callJSMethodNative(int, int, java.lang.String, int, boolean, java.lang.Object[])
2021-01-13 09:55:48.559 4802-4802/org.nativescript.demo A/tivescript.dem: java_vm_ext.cc:542] "main" prio=5 tid=1 Runnable

That is the crash with fromData or fromDataSync we're passing the Bitmap and not a stream into the method so of course that crashes.

[bradmartin]

@seankonig it's simply new ImageSource(data) to create the Image from a bitmap on android or UIImage on iOS.

    this._myDrawingPad.getDrawing().then(res => {      
      // convert native image data (bitmap on android) to imageSource for NS
      const image = new ImageSource(res);
      const base64imageString = image.toBase64String('jpg'); // if you need it as base64
      this.set('drawingImage', image);
    });

[seankonig]

Boom, thanks dude.

[bradmartin]

I'm adding a method to do this in the source right now, will publish a minor with the new method also 💯 thanks for helping find the bug 👍

[seankonig]

happy to help. your example works like a charm.

[bradmartin]

getDrawingAsBase64(format?: "png" | "jpg" | "jpeg") - Promise (returns image as base64 string if successful)

this will be the method when 4.1.0 is published, just FYI. handles the conversion in the plugin directly since many people seem to need this :)

[seankonig]

That's really cool and makes a lot of sense to add. Thanks for including it. I Will update when you publish the new version👍

[megatdaharus]

thank you all for helping