无法从FILE URI显示图像,Ionic Framework

hmmo2u0o  于 2022-12-08  发布在  Ionic
关注(0)|答案(5)|浏览(170)

我试图显示从相机拍摄的图像并将其显示到视图。我在许多网站上搜索过这个答案,但没有任何效果。我尝试过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>

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

vyu0f0g1

vyu0f0g11#

我使用了文件插件和它的方法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);
});

link for ionic cordova file plugin

mu0hgdu0

mu0hgdu02#

最后我得到了解决方案:
在组件中:

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插件离子网络视图〉= 4

kqlmhetl

kqlmhetl3#

在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"/>
ycggw6v2

ycggw6v24#

从新离子和电容器可以这样做:

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,然后才能在应用程序中呈现。

j7dteeu8

j7dteeu85#

按以下方式修改您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"/>

相关问题