[英]Can't open camera page anymore after implementing camera plugin
I want to use the native camera with capacitor camera plugin. 我想将本机相机与电容器相机插件一起使用。 But after implementing, I can't open the page anymore (when I click the button that routes me to that page nothing happens) I found out that error has to be in the commented html section.
但是实施后,我无法再打开页面了(当我单击将我路由到该页面的按钮时,什么也没有发生),我发现该错误必须在已注释的html部分中。 But it doesnt show an error.
但是它没有显示错误。 The whole app loads when the section is not commented.
未对该部分进行评论时,将加载整个应用程序。
page.html page.html中
<ion-content>
<!--
<ion-card>
<img
role="button"
class="image"
(click)="onPickImage"
[src]="selectedImage"
*ngIf="selectedImage"
>
</ion-img>
</ion-card>
-->
<ion-footer>
<ion-button (click)="onPickImage()" *ngIf="!selectedImage" class="buttonPost" expand="full" color="primary">Take Photo</ion-button>
</ion-footer>
page.ts page.ts
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Plugins, Capacitor, CameraSource, CameraResultType } from '@capacitor/core';
@Component({
selector: 'app-cam',
templateUrl: './cam.page.html',
styleUrls: ['./cam.page.scss'],
})
//Native Kamerafunk. importieren hier
export class CamPage implements OnInit {
@Output() imagePick = new EventEmitter<String>();
selectedImage: string;
constructor() { }
onPickImage() {
if (!Capacitor.isPluginAvailable('Camera')) {
return; //falls kein Kamera vorhanden ist.
}
Plugins.Camera.getPhoto({
quality: 50,
source: CameraSource.Prompt, //Prompt heisst entweder Gallery oder Camera vlt stylischer seperater Button hinzufügen
correctOrientation: true,
height: 320,
width: 200,
resultType: CameraResultType.Base64 //Img encoded into a string, can be converted into a file
}).then(image => {
this.selectedImage = image.base64String;
this.imagePick.emit(image.base64String);
}).catch(error => { //Error Handler
console.log(error);
return false;
})
}
onImagePicked(image: string) {
}
ngOnInit() {
}
}
The first thing to note is that you shouldn't actually use the Base64
encoding options. 首先要注意的是,您实际上不应使用
Base64
编码选项。
It's a known bad piece of documentation as it leads people to using it, when it's not a best practice. 这不是众所周知的糟糕文档,因为它不是最佳实践,它会引导人们使用它。
The reason is that it uses a lot of memory this way and crashes some devices. 原因是它以这种方式使用了大量内存,并使某些设备崩溃。
Secondly, when you say there is no error, do you mean no error displayed visually? 其次,当您说没有错误时,是否表示没有视觉上显示的错误?
When Ionic/Angular crashes it will dump the message out to the console. 当Ionic / Angular崩溃时,它将把消息转储到控制台。
You can see this by using the browser developer tools: 您可以使用浏览器开发人员工具来查看此内容:
Using Chrome DevTools - Android Development - Ionic Documentation 使用Chrome DevTools-Android开发-Ionic文档
or if you are on Mac: 或者,如果您使用的是Mac:
Using Safari Web Inspector - iOS Development - Ionic Documentation 使用Safari Web Inspector-iOS开发-Ionic文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.