0

我正在尝试使用本机脚本绘图板插件为应用程序捕获绘图。我正在从此处提供的有用教程中工作（除其他外）： Capturing Signatures with NativeScript + Angular

我的组件包括以下内容：


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

在 TS 中，我有以下内容：


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

      }

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


    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.

然后它崩溃了。

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

4

1 回答 1

0

这样做可以解决问题：

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

}

于 2020-08-20T13:35:59.413 回答