Capturing drawing from Nativescript Angular with nativescript-drawingpad - nativescript-angular

Question

I'm attempting to capture drawings for an app using the native-script drawingpad plugin. I'm working (among other things) from the helpful tutorial provided here:
Capturing Signatures with NativeScript + Angular
My component includes the following:
<GridLayout rows="*,auto" columns="*" backgroundColor="#FFFFFF">
<StackLayout col="0" row="0" horizontalAlignment="center" verticalAlignment="center" backgroundColor="#FFFFFF">
<Label [visibility]="signatureImage ? 'visible' : 'collapsed'" text="Preview" textWrap="true" horizontalAlignment="center" verticalAlignment="center"></Label>
<Image [visibility]="signatureImage ? 'visible' : 'collapsed'" [src]="signatureImage" height="150" width="90%" borderColor="black" borderWidth="2"></Image>
<Label text="Sign/Update below" textWrap="true" horizontalAlignment="center" verticalAlignment="center" marginTop="20"></Label>
<DrawingPad #DrawingPad backgroundcolor="#FEFEFE" height="150" width="90%" id="drawingPad" penColor="#FF6B6B" penWidth="3" borderColor="black"
borderWidth="2">
</DrawingPad>
</StackLayout>
<GridLayout col="0" row="1" rows="auto,*" columns="*,*">
<Button col="0" row="0" colSpan="2" text="Clear Signature" (tap)="clearMyDrawing()"></Button>
<Button col="1" row="1" class="btn -primary" text="Save" (tap)="onDoneTap()"></Button>
</GridLayout>
</GridLayout>
In the TS I have the following:
onDoneTap(): void {
// get reference to the drawing pad
const pad = this.DrawingPad.nativeElement;
// then get the drawing (Bitmap on Android) of the drawingpad
let drawingImage;
pad.getDrawing().then(
(data) => {
console.log(data);
drawingImage = data;
this.signatureImageString = imageSourceModule.fromNativeSource(data).toBase64String("png");
//this.driverSvc.storeSignature(this.DRNO, this.signatureImageString,null,null,null);
},
(err) => {
console.log(err);
}
);
}
Running the application produces the following error at the console:
CONSOLE LOG file: src/app/deliveries/signatures/signatures.component.ts:43:22: <UIImage:0x280feb060 anonymous {729, 150}>
CONSOLE LOG file: node_modules/#nativescript/core/image-source/image-source.ios.js:344:0: fromNativeSource() is deprecated. Use ImageSource constructor instead.
Then it crashes.
Unfortunately the documents as far as I can see do not indicate that fromNativeSource() is deprecated. I need to be able to either 1) save the image as a file to subsequently upload, or 2) save the image as a base64 string for subsequent upload.

Answer 1

Doing it this way solved the problem:
onDoneTap(): void {
// get reference to the drawing pad
const pad = this.DrawingPad.nativeElement;
// then get the drawing (Bitmap on Android) of the drawingpad
pad.getDrawing().then(
( data) => {
const source = new imageSourceModule.ImageSource;
source.setNativeSource(data);
this.signatureImageString = source.toBase64String("png");
})
}