使用nativescript-drawingpad从Nativescript Angular捕获图形

如何解决使用nativescript-drawingpad从Nativescript Angular捕获图形

我正在尝试使用本机脚本drawingpad插件捕获应用程序的图纸。我正在（通过其他方式）从此处提供的有用的教程中进行工作： Capturing Signatures with NativeScript + Angular

我的组件包括以下内容：

import win32com.client as win32

fileDirectory = 'Hello World.xlsx'

#excelFile = win32.Dispatch('Excel.Application')
excelFile = win32.gencache.EnsureDispatch('Excel.Application')

excelFile.Visible = True
excelFile.DisplayAlerts = True

wb = excelFile.Workbooks.Open(fileDirectory)
ws = wb.Sheets("Sell")

ws.Range("D1").Value = "Hello World!"
ws = None

wb.Close(False)
wb = None

excelFile.Quit()
excelFile = None

在TS中，我有以下内容：

    <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>

运行应用程序会在控制台上产生以下错误：

    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);
            },(err) => {
              console.log(err);
            }
        );

      }

然后它崩溃了。

不幸的是，据我所知，这些文档并未表明fromNativeSource（）已被弃用。我需要能够1）将图像另存为文件以供随后上传，或者2）将图像另存为base64字符串以供后续上传。

解决方法

这样做可以解决问题：

  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");
        })

}