我正在尝试创建一个带有自定义相机的平板电脑应用程序。我想实现一种方法，使按钮浮动在取消摄像预览。由于某些原因，相机预览始终位于顶部。我把is设置为true，但这没有什么区别。
我的代码：
HTML
<ion-content [ngClass]="{'custom-ion-content': cameraOn}">
<div class="cameraOptions" *ngIf="this.cameraOn">
<button class="center" mat-fab color="primary" (click)="takePhoto()"><mat-icon>add_a_photo</mat-icon></button>
</div>
<div class="carousel">
<ul>
<li class="slide" *ngFor="let image of this.images">
<a href="#"><img [src]="image" alt="" /><span>Image Name</span></a>
</li>
</ul>
</div>
<mat-card class="cameraBackBar" *ngIf="this.cameraOn">
<mat-icon (click)="stopCamera()">clear</mat-icon>
</mat-card>
</ion-content>
TypeScript
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
// import { CameraPreview } from 'cordova-plugin-camera-preview';
import { DataService } from 'src/app/services/data/data.service';
import { CameraPreview, CameraPreviewPictureOptions, CameraPreviewOptions, CameraPreviewDimensions } from '@ionic-native/camera-preview/ngx';
@Component({
selector: 'app-camera',
templateUrl: './camera.component.html',
styleUrls: ['./camera.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CameraComponent implements OnInit {
cameraOn = false;
images = [];
constructor(private dataService: DataService, private cameraPreview: CameraPreview) { }
ngOnInit() {
this.dataService.cameraOn.subscribe(resp => {
this.cameraOn = resp as boolean;
if (this.cameraOn) {
this.startCamera();
}
else {
this.images = [];
this.cameraOn = false;
}
});
}
startCamera() {
let cameraPreviewOpts: CameraPreviewOptions = {
x: 0,
y: 64,
width: window.screen.width,
height: window.screen.height,
camera: this.cameraPreview.CAMERA_DIRECTION.BACK,
tapPhoto: false,
tapFocus: true,
previewDrag: false,
disableExifHeaderStripping: false,
toBack: true
};
setTimeout(() => {
this.cameraPreview.startCamera(cameraPreviewOpts).then(
(res) => {
console.log(res)
},
(err) => {
console.log(err)
});
}, 100);
}
stopCamera() {
this.dataService.setCameraState(false);
this.cameraPreview.stopCamera();
}
takePhoto() {
this.cameraPreview.takePicture({
width: 1280,
height: 1280,
quality: 85
}).then(image => {
let picture = 'data:image/jpeg;base64,' + image;
this.images.push(picture);
}, err => console.log(err));
}
}
CSS
.custom-ion-content {
--background: transparent!important;
}
.center {
margin: auto;
text-align: center;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.cameraOptions {
height: 64px;
width: 100vw;
position: fixed;
z-index: 999;
top: calc(100vh - 64px);
z-index: 100;
background-color: transparent;
}
.cameraBackBar {
top: -0px;
height: 64px;
width: 100vw;
position: fixed;
z-index: 999;
}
.carousel {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
position: absolute;
background-color: red;
z-index: 999;
top: calc(100vh - 214px);
}
.carousel .slide {
display: inline-block;
}
我看到元素在正确的位置，只有相机预览总是在顶部。以下是我使用的依赖项。
软件包.json
{
"name": "kakeswaal-expertise-app",
"version": "0.0.1",
"author": "Jasbit",
"homepage": "https://jasbit.nl",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"build:android-emulator": "ionic build -- -c=androidemulator && npx cap copy android && npx cap open android",
"build:android-device": "ionic build -- -c=androiddevice && npx cap copy android && npx cap open android",
"build:android-test": "ionic build -- -c=test && npx cap copy android && npx cap open android"
},
"private": true,
"dependencies": {
"@angular/animations": "^10.0.14",
"@angular/cdk": "^10.2.0",
"@angular/common": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/material": "^10.2.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@capacitor/android": "^2.4.0",
"@capacitor/core": "2.4.0",
"@fullcalendar/angular": "^5.3.1",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/timegrid": "^5.3.1",
"@ionic-native/action-sheet": "^5.29.0",
"@ionic-native/camera-preview": "^5.30.0",
"@ionic-native/core": "^5.30.0",
"@ionic-native/device-motion": "^5.30.0",
"@ionic-native/email-composer": "^5.29.0",
"@ionic-native/file": "^5.30.0",
"@ionic-native/launch-navigator": "^5.29.0",
"@ionic-native/media-capture": "^5.30.0",
"@ionic-native/network": "^5.28.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/sqlite": "^5.28.0",
"@ionic-native/status-bar": "^5.30.0",
"@ionic/angular": "^5.0.0",
"@ionic/storage": "^2.3.1",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-camera-preview": "^0.12.1",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-email-composer": "^0.9.2",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-media-capture": "^3.0.3",
"cordova-plugin-network-information": "^2.0.2",
"cordova-sqlite-storage": "^5.0.1",
"ionic-cache": "^5.2.0",
"mat-progress-buttons": "^9.1.1",
"material": "^0.4.3",
"ngx-material-timepicker": "^5.5.3",
"ngx-toastr": "^13.0.0",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.5",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "~10.0.5",
"@angular/compiler": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular/language-service": "~10.0.0",
"@capacitor/cli": "2.4.0",
"@ionic/angular-toolkit": "^2.3.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
},
"description": "Kakeswaal expertise app"
}
根据您的package.json，您正在使用Cordova Plugin Camera Preview，在与电容器一起使用时，存在选项toBack不工作的已知问题：https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview/issues/601
您可能需要尝试替代插件电容器相机预览：https://github.com/capacitor-community/camera-preview
我没有看到在CameraPreviewOptions中设置alpha通道值。确保添加
alpha: 1
在CameraPreviewOptions中。我面临着完全相反的问题，在使用Cordova版本的插件时，toBack设置为true时，我看不到预览。