函数调用时无法返回更新的值(base64Image)

时间:2019-04-16 11:06:00

标签: angular ionic-framework ionic3 ionic-native

在我的离子项目中,我正在编写一项服务,以在函数调用时返回由本机设备照相机单击的base64图像。

问题是当我在服务中调用函数时,return语句返回旧值,而不是更新的值,该值应该是单击的图像。

例如,我试图设置用户个人资料,它显示的图像是单击的倒数第二个图像,而不是最近的图像。

最初,我将值保存在变量中并直接访问它。 稍后,我在函数调用中返回了值

相机服务

import { Injectable } from "@angular/core";
import { Camera, CameraOptions } from "@ionic-native/camera/ngx";
import { Platform } from "@ionic/angular";

@Injectable({
  providedIn: "root"
})
export class CameraCordovaService {
  constructor(private camera: Camera, public platform: Platform) {}

  base64Image: string;

  takePicture(): string {
    const options: CameraOptions = {
      quality: 30,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.platform.ready().then(() => {
      this.camera.getPicture(options).then(
        imageData => {
          //this.base64Image = "data:image/jpeg;base64," + imageData;

          let tempImg="data:image/jpeg;base64," + imageData;
          this.base64Image=tempImg
          console.log(this.base64Image);

        },
        err => {
          // Handle error
          console.log("Camera issue: " + err);
        }
      );
    });
     return this.base64Image;
  }
}

正在使用此相机插件服务的页面的打字稿文件

import { ActionSheetController } from "@ionic/angular";
import { CameraCordovaService } from "../plugins/camera-services/camera-cordova.service";

@Component({
  selector: "app-tab2",
  templateUrl: "tab2.page.html",
  styleUrls: ["tab2.page.scss"]
})
export class Tab2Page {
  imgProfile: string =
    "data:image/png;base64,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";

  constructor(
    public Camera: CameraCordovaService,
    public actionSheetController: ActionSheetController
  ) {}
  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: "Profile Picture",
      buttons: [
        {
          text: "Camera",
          role: "destructive",
          icon: "camera",
          handler: () => {
            console.log("Camera");
            this.imgProfile = this.Camera.takePicture();
            console.log(this.imgProfile);a
          }
        },
        {
          text: "Gallery",
          icon: "share",
          handler: () => {
            console.log("Gallery clicked");
          }
        },
        {
          text: "Cancel",
          icon: "close",
          role: "cancel",
          handler: () => {
            console.log("Cancel clicked");
          }
        }
      ]
    });
    await actionSheet.present();
  }
}

HTML文件

    <ion-item (click)="presentActionSheet()">
      <ion-label>Avatar</ion-label>
      <ion-avatar>
        <img [src]="imgProfile" />
      </ion-avatar>
    </ion-item>

我到底需要做些什么才能使返回值是最新的?

0 个答案:

没有答案