Ionic 4-关闭相机peview后出现黑屏

时间:2019-09-19 06:44:56

标签: ionic4

使用camera preview插件,一切正常,除了每当我在Ionic 4中使用cameraPreview.stopCamera()功能关闭相机预览时,屏幕都变黑。 如何在第三张屏幕截图中删除黑屏。

下面附有屏幕截图,以更好地了解问题。

启动应用程序时,背景屏幕为白色,如下面的屏幕截图所示。enter image description here

打开相机后,相机预览可以正常工作,如下面的屏幕截图所示 enter image description here

但是关闭相机后,背景屏幕变黑。 enter image description here

以下是参考代码 camera-preview.ts文件

constructor(
    private router: Router,
    private customizeCameraService: CustomizeCameraService
  ) {
  }

  ionViewWillEnter() {
    this.openCamera();
  }

  ionViewWillLeave() {
    this.customizeCameraService.stopCamera();
  }

  openCamera() {
    this.customizeCameraService.openCameraPreview().then(
      (res) => {
        this.isCameraOpen = true;
        this.showIcons    = true;
      },
      (err) => {
        if (err === 'Illegal access') {
          this.router.navigate(['/tabs']);
        }
      }
    );
  }

  takePicture(captureType: string) {
    this.customizeCameraService.takePicture().then(
      (imageData) => {
        this.customizeCameraService.stopCamera().then(
          (res) => {
            this.picture = 'data:image/jpeg;base64,' + imageData;
            this.isCameraOpen = false;
          },
          (err) => {
            console.log(err);
          }
        );
      },
      (err) => {
        console.log(err);
      }
    );
  }

camera-preview.scss文件

ion-content,
ion-header,
.nav-decor {
  --background: transparent !important;
}

camera-preview-service.ts文件

cameraPreviewOpts: CameraPreviewOptions = {
    x: 0,
    y: 0,
    width: window.screen.width,
    height: window.screen.height,
    camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
    tapPhoto: true,
    previewDrag: false,
    toBack: true,
  };

  // Take picture options
  pictureOpts: CameraPreviewPictureOptions = {
    width: 360,
    height: 640,
    quality: 85
  };

  constructor(
    @Inject(CameraPreview) public  cameraPreview: CameraPreview
  ) { }

  openCameraPreview(): Promise<any> {
    return this.cameraPreview.startCamera(this.cameraPreviewOpts);
  }

  takePicture(): Promise<any> {
    return this.cameraPreview.takePicture(this.pictureOpts);
  }

  stopCamera(): Promise<any> {
    return this.cameraPreview.stopCamera();
  }

0 个答案:

没有答案