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，该API可以通过从'ionic-native'库中导入ImagePicker来获取。

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/

在Ionic 2中使用离子原生照相机拍摄的一页上显示多个图像

1 个答案: