我试图显示从相机拍摄的图像并将其显示到视图。我在许多网站上搜索过这个答案,但没有任何效果。我尝试过DomSanitizer,Base64,甚至照片库,但从他们返回的图像不显示。
我的home.ts文件是
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
myPhoto:any;
image;
constructor(public navCtrl: NavController, private camera: Camera, public DomSanitizer: DomSanitizer) {
}
takePhoto(){
const options: CameraOptions = {
quality: 100,
targetHeight: 320,
targetWidth: 320,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64 (DATA_URL):
this.myPhoto = 'data:image/jpeg;base64,' + imageData;
this.image = imageData;
console.log(this.myPhoto);
alert(this.myPhoto);
}, (err) => {
// Handle error
});
}
}
下面是我的home.html代码
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="takePhoto()" >Take Photo</button>
<!-- <img src="{{myPhoto}}"/> -->
<!-- <img src="{{image}}"/> -->
<!-- <img [src]="DomSanitizer.bypassSecurityTrustUrl(myPhoto)"/> -->
<!-- <img data-ng-src="{{myPhoto}}"/> -->
<img src="data:image/jpeg;base64,file:///storage/sdcard0/Android/data/io.ionic.starter/cache/1533211220154.jpg"/>
</ion-content>
这里的注解代码是我已经尝试过但没有成功。
5条答案
按热度按时间vyu0f0g11#
我使用了文件插件和它的方法readAsDataURL。它对我来说工作得很好。希望它能帮助那里的人:)
link for ionic cordova file plugin
mu0hgdu02#
最后我得到了解决方案:
在组件中:
在html中:
注意:cordova插件离子网络视图〉= 4
kqlmhetl3#
在ts文件中使用此函数
在您的html中使用它
ycggw6v24#
从新离子和电容器可以这样做:
Capacitor和Cordova应用程序托管在本地HTTP服务器上,并通过http://协议提供服务。但是,某些插件会尝试通过file://协议访问设备文件。为了避免http://和file://之间的问题,必须重写设备文件的路径以使用本地HTTP服务器。例如,file:///path/to/device/file必须重写为http://://path/to/device/file,然后才能在应用程序中呈现。
j7dteeu85#
按以下方式修改您home.ts,
在html文件中,