從相機採用離子母語離子2

Question

採取一個頁面顯示多個圖像我試圖顯示圖片陸續從相機離子2採取了同樣的頁面，但我只能在網頁上顯示一個圖像。 這裏是我的代碼：

public base64Image: string; 
public CompleteImage: Array<{image:string}>; 

public OpenCamera() { 

    Camera.getPicture({ 
     quality: 75, 
     destinationType: Camera.DestinationType.DATA_URL, 
     sourceType: Camera.PictureSourceType.CAMERA, 
     allowEdit: true, 
     encodingType: Camera.EncodingType.JPEG, 
     targetWidth: 200, 
     targetHeight: 200, 
     saveToPhotoAlbum: false 
    }).then(imageData => { 
     alert(1); 
     this.base64Image = "data:image/jpeg;base64," + imageData; 
     alert(2); 
     this.CompleteImage.push(this.base64Image); 
     alert(this.CompleteImage.length); 

    }, error => { 
     console.log("ERROR -> " + JSON.stringify(error)); 
    }); 
} 

的前端 如果我使用此代碼

<ion-card *ngIf="base64Image"> 
    <img [src]="base64Image" />  
</ion-card> 

則顯示圖像但從集合。如果我試圖顯示它

<ion-card *ngFor="let i of CompleteImage">    
    <img [src]="i.image"/> 
    </ion-card> 

然後它不工作。

這是從那裏我試圖做到這一點的鏈接。 here

Answer 1

您應該理想地使用ImagePicker API，可以通過從'ionic-native'庫導入ImagePicker獲取API。

import { Camera, ImagePicker } from 'ionic-native'; 

有這樣的功能的輔助類（如果您願意）

export function pickImages() { 
    const options = { 
     quality: 50, 
     width: 1366, 
     height: 768, 
     maximumImagesCount: 10, 
    }; 
    return ImagePicker.getPictures(options); 
} 

上述函數會返回一個承諾。你可以像這樣使用它。

pickImages().then((results) => { 
    for (var i = 0; i < results.length; i++) { 
     console.log('Image URI: ' + results[i]); 
    } 
}, (err) => { }); 

請記住，這將返回圖像的位置字符串。你必須閱讀一些其他的方式

參考 https://ionicframework.com/docs/v2/native/image-picker/