从相机采用离子母语离子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/