Question

我有一个动态生成的表单，它还允许用户从他的移动摄像头捕获图片并将其设置为他的个人资料图片。我还有一个模态，它有一个签名板组件，可以捕获签名。但是，当我解散模态时，我正在丢失之前捕获的图像。有人可以帮帮我吗？

这是我的代码。

HTML：

<template ngSwitchCase="profilePic">
  <div class="profile-picture">
    <center><a (click)="takePicture(field)"><img [src]="field.source"></a></center>
  </div>
</template>

JS for takePicture（）：

takePicture(field) {
  this.test = field;
  console.log(this.test);
  Camera.getPicture({
    destinationType: Camera.DestinationType.DATA_URL,
    targetWidth: 1000,
    targetHeight: 1000
  }).then((ImageData) => {
    this.base64Image = "data:image/jpeg;base64," + ImageData;
    field.value = this.base64Image;
    field.source = this.base64Image;
    this.form.value[field.key] = field.source;
    this.form.controls[field.key]['_value'] = field.source;
  }, (err) => {
    // Handle error
    console.log('Cannot take picture!');
  });
}

并且签名模式在这里：

captureSignature(field) {
  this.modal = this.modalCtrl.create(ModalPage);
  this.modal.present();
  this.modal.onDismiss(data => {
    field.value = data;
    this.form.value[field.key] = field.value;
    this.form.controls[field.key]['_value'] = field.value;
  });
}

模态函数在这里：

export class ModalPage {
 @Output() saveSignature: EventEmitter<string> = new EventEmitter<string>();
 constructor(private platform: Platform, private params: NavParams, private viewCtrl: ViewController) {}
 @ViewChild(SignaturePad) signaturePad: SignaturePad;
 private signaturePadOptions: Object = {
    'canvasWidth': 520,
    'canvasHeight': 500,
  };

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  doOnEnd() {
    // will be notified of szimek/signature_pad's onEnd event
  //  console.log(this.signaturePad.toDataURL());
    return this.signaturePad.toDataURL();
    // this.saveSignature.emit(this.signaturePad.toDataURL());
    // this.exit();
  }
}

解散模态时丢失表格数据

0 个答案: