无法显示FILE URI中的图像，Ionic框架

Question

我正在尝试显示从相机拍摄的图像，并将其显示到视图中。我在很多网站上搜索过这个答案，但都没有成功。我试过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
});
}
}

这是我的主页.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>

这里注释的代码是我尝试过但没有成功。

Answer 1

我使用了文件插件及其方法readAsDataURL。它对我来说效果很好。希望它能帮助外面的人：(

const options: CameraOptions = {
quality: 100,
allowEdit: true,
sourceType:  this.camera.PictureSourceType.CAMERA ,
saveToPhotoAlbum: true,
correctOrientation: true,
encodingType: this.camera.EncodingType.JPEG,
destinationType: this.camera.DestinationType.FILE_URI
}
this.camera.getPicture(options).then((imageData) => {
//imageData will hold the full file path so we need to extract filename and path using file plugin 
var filename = imageData.substring(imageData.lastIndexOf('/')+1);
var path =  imageData.substring(0,imageData.lastIndexOf('/')+1);
//then use it in the readAsDataURL method of cordova file plugin
//this.file is declared in constructor file :File
this.file.readAsDataURL(path, filename).then(res=>{
item.pic = res;
});
}, (err) => {
alert(err);
});

ionic cordova文件插件的链接

Answer 2

最后我得到了解决方案：

组件内：

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((imgFileUri) => {
this.myImg = (<any>window).Ionic.WebView.convertFileSrc(imgFileUri);
}, (err) => {
console.log(err);
});
}

在html:中

<img [src]="myImg" />

注：cordova插件ionic webview>=4

Answer 3

通过新的离子和电容器，您可以这样做：

import { Capacitor } from '@capacitor/core';
Capacitor.convertFileSrc(filePath);

文件协议​

Capacitor和Cordova应用程序托管在本地HTTP服务器上，并使用HTTP://协议提供服务。然而，一些插件试图通过file://协议访问设备文件。为了避免http://和file://之间的困难，必须重写设备文件的路径以使用本地http服务器。例如file:///path/to/device/file在应用程序中呈现之前，必须重写为http://：//path/to/device/file。

Answer 4

在ts文件中使用此函数

takePhoto(){
const options: CameraOptions = {
quality: 100,
targetHeight: 320,
targetWidth: 320,
destinationType: this.camera.DestinationType.DATA_URL,
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);
}, (err) => {
// Handle error
});
}

在你的html 中使用这个

<img [src]="myPhoto"/>

Answer 5

按照以下方式修改home.ts，

private openGallery(): void {
let cameraOptions = {
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
destinationType: this.camera.DestinationType.FILE_URI,
quality: 100,
targetWidth: 1000,
targetHeight: 1000,
encodingType: this.camera.EncodingType.JPEG,
correctOrientation: true
}
this.camera.getPicture(cameraOptions)
.then(file_uri => this.imageSrc = file_uri,
err => console.log(err));
}

在你的html文件中，

<img [src]="imageSrc"/>