媒体捕获原生插件 Ionic 3

Question

我正在制作一个 ionic 3 应用程序，我想让用户在其中捕获图片和视频。所以我使用了媒体捕获插件，一旦我捕获了图像或视频，我就在 return 中得到了 MediaFile[] 的承诺。现在，当我尝试在带有 [src] = mediaFile[‘0’].fullPath 的 ion-img 标签中显示该图像作为预览时。它没有显示图像。

请告诉我，如果我的方法有误，我该怎么办。

这里是捕获部分：

this.mediaCapture.captureImage()
  .then(

    (data: MediaFile[]) => {
         this.navCtrl.push('NewPostPage', {
         mediaFile : data
         })
    },
    (err: CaptureError) => console.error(err)
  );

这里是newpostpage的html：

<ion-content padding>

  <ion-img [src] = 'image'></ion-img>

</ion-content>

这里是 newpostpage 的 .ts 文件：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { MediaFile } from '@ionic-native/media-capture';

/**
 * Generated class for the NewPostPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-new-post',
  templateUrl: 'new-post.html',
})
export class NewPostPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  mediaFile: MediaFile[] = this.navParams.get('mediaFile');
  image: string = this.mediaFile['0'].fullPath;


  ionViewDidLoad() {
    console.log('ionViewDidLoad NewPostPage');
    console.log(this.image);    
  }

}

Answer 1

嘿，不知道你是否还有这个问题。

我解决这个问题的方法是在控制台中打印文件路径，然后我尝试删除它的不同部分，看看有什么用。

特别有效的是像这样删除 "file:" 前缀：

self.media.captureVideo().then((data: MediaFile[]) => {
                let file = data.pop();
                let path = file.fullPath.replace('file:', '');
                resolve(path);
            }, err => {
                console.dir(err);
                reject(err);
            });

然后我可以使用 transfer/play 文件的路径。

媒体捕获原生插件 Ionic 3

Media Capture Native Plugin Ionic 3

angular

typescript

ionic-framework

ionic3

ionic-native