应用程序中来自相机和图库的离子显示图像答案

【问题标题】：Ionic show image from camera and gallery in app应用程序中来自相机和图库的离子显示图像
【发布时间】：2019-12-18 19:20:57
【问题描述】：

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

使用this project as a guideline 我的代码：

安装插件：

$ 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));   
  }

}

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

【问题讨论】：

您用作指南的那个项目是针对 Ionic4 的，它与您似乎试图定位的 Ionic3 完全不同。（也不能很好地满足您的要求）

标签： cordova ionic-framework ionic2 ionic3 cordova-plugins

【解决方案1】：

你不需要安装额外的模块来解决这个问题，你可以使用预装的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】：

您可以使用@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) => {


        });

【讨论】：