Question

我正在尝试使用camera Cordova plugin来显示从相机拍摄或从应用程序内的设备拍摄的图像。

要安装插件：

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera@4

在html文件中

<ion-header>
  <ion-navbar>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
<h3 text-center>
  {{imageSrc}}
</h3>
<div class="gallery-button" text-center>
  <img [src]="imageSrc" />    
</div>

</ion-content>

在ts文件中

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera';

.
.
.
.

private imageSrc: string;

getImage() {
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
    }
    console.log(cameraOptions);
    this.camera.getPicture(cameraOptions)
      .then(file_uri => this.imageSrc = file_uri, 
      err => console.log(err));   
  }

}

问题是该图像未在我的视图中显示，并且在其位置出现了一个损坏的图像图标，如下所示。我见过的所有示例都使用类似的代码，并且都存在图像链接断开而不是显示实际图像的问题。

Answer 1

您可以使用@ ionic-native / file-path节点模块来解析文件路径，如下所示：基本上，如果要从PHOTO LIBRARY中选择图像，则必须解析路径以获取正确的文件路径。

这是我用过的：

  // Get the data of an image
        this.camera.getPicture({
            quality: 60,
            sourceType: sourceType,
            saveToPhotoAlbum: false,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            correctOrientation: true  //Corrects Android orientation quirks
        }).then((imagePath: string) => {

            // Special handling for Android
            if ((this.platform.is('android') || this.platform.is('Android')) && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {

                this.filePath.resolveNativePath(imagePath)
                    .then((filePath: string) => {

                        let correctPath: string = filePath.substr(0, filePath.lastIndexOf('/') + 1);
                        let currentName: string = filePath.substr(filePath.lastIndexOf('/') + 1);
                        console.log('currentName', currentName);
                        console.log('correctPath', correctPath);

                    }).catch((ex: string) => {

                    });

            } else {
                let currentName: string = imagePath.substr(imagePath.lastIndexOf('/') + 1);
                let correctPath: string = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);

            }
        }, (error: any) => {


        });

Answer 2

您无需安装其他模块即可解决此问题，可以按以下方式使用预安装的cordova-plugin-ionic-webview插件：

在导入行之后，添加此行，以使TypeScript不会抱怨

declare var window;

代替此

this.imageSrc = file_uri

使用此

 this.imageSrc = window.Ionic.WebView.convertFileSrc(file_uri)

然后重新运行您的项目，它应该如下所示正常工作

注意：请确保您使用的是cordova-plugin-ionic-webview> 2.0。

应用中相机和图库中的离子显示图像

2 个答案: