使用离子和电容器创建自定义相机预览叠加

问题描述

我正在尝试创建带有叠加层的自定义相机。我试过 https://www.youtube.com/watch?v=JA8k738i9jQ&t=385s 教程。实际上这个教程输出我需要。但是当我点击打开的相机时，它会打开原生相机而不是应用程序中的相机。我做错了什么吗。这是我的代码。提前致谢。

camera.ts

import { Component,OnInit } from '@angular/core';
import { Plugins } from '@capacitor/core';

const { CameraPreview } = Plugins

import { CameraPreviewOptions,CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';

@Component({
  selector: 'app-camera',templateUrl: './camera.page.html',styleUrls: ['./camera.page.scss'],})
export class CameraPage implements OnInit {
  image = null;
  cameraActive = false;

  constructor() { }

  ngOnInit() {
  }

  openCamera() {
    const cameraPreviewOptions: CameraPreviewOptions = {
      position: 'rear',parent: "cameraPreview",className: "cameraPreview"
    };
    CameraPreview.start(cameraPreviewOptions);
    this.cameraActive = true;
  }

  async stopCamera() {
    await CameraPreview.stop();
    this.cameraActive = false;
  }

  async captureImage() {
    const CameraPreviewPictureOptions: CameraPreviewPictureOptions = {
      quality: 90

    }

    const result = await CameraPreview.capture(CameraPreviewPictureOptions)

    this.image = `data:image/jpeg;base64,$(result.value)`

    this.stopCamera()

  }

  flipCamera() {
    CameraPreview.flip()

  }

}

camera.html

<ion-header>
  <ion-toolbar>
    <ion-title>camera</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="cameraPreview" class="cameraPreview">
    <div *ngIf="cameraActive">
      <img src="assets/icon/guide.png" class="image-overlay">
      <ion-button (click)="stopCamera()" expand="full" id="close">
        <ion-icon name="close-circle" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button (click)="captureImage()" expand="full" id="capture">
        <ion-icon name="camera" slot="icon-only"></ion-icon>
      </ion-button>
      <ion-button (click)="flipCamera()" expand="full" id="flip">
        <ion-icon name="repeat" slot="icon-only"></ion-icon>
      </ion-button>
    </div>
  </div>
  <ion-img [src]="image" *ngIf="image && !cameraActive"></ion-img>
  <ion-button (click)="openCamera()" expand="full" *ngIf="!cameraActive">Open Camera</ion-button>
  <ion-button (click)="stopCamera()" expand="full" *ngIf="cameraActive">Open Camera</ion-button>
</ion-content>

相机.scss

ion-content {
  --background: transparent !important;
}
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.cameraPreview {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
}

.image-overlay {
  z-index: 1;
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
}

#capture {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  z-index: 11;
}
#close {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 175px);
  width: 50px;
  height: 50px;
  z-index: 11;
}
#flip {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 125px);
  width: 50px;
  height: 50px;
  z-index: 11;
}

#close::part(native) {
  border-radius: 30px;
}
#capture::part(native) {
  border-radius: 30px;
}
#flip::part(native) {
  border-radius: 30px;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）