ionic 3 图像选择器和像 Instagram 一样的预览

Question

我正在开发一个像 instagram 这样的 ionic 3 应用程序，让用户从他们的手机相册中挑选照片，同时他们可以在同一页面上预览照片。

我试过科尔多瓦-插件-照片库在这里，但没有限制功能，所以我必须得到用户的相册中所有照片，这可能是非常大的体积。 用户必须等到所有照片都加载完毕后才能单击并选择一张照片。 这真是糟糕的用户体验。

有人有想法吗？ 谢谢。

Answer 1

您可以使用 base64 图像

 # view 
 <img *ngFor='let image of images' [src]="DomSanitizer.bypassSecurityTrustUrl('data:image/jpeg;base64,'+image)" style="width: 100px;height:100px;" [hidden]="lastImage === null">

 # choice select method
 public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'choice select method',
      buttons: [
        {
          text: 'gallery',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.SAVEDPHOTOALBUM);
          }
        },
        {
          text: 'take image',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }



  public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
    quality: 100,
    sourceType: sourceType,
    encodingType: this.camera.EncodingType.JPEG,
    allowEdit: true,
    saveToPhotoAlbum: true,
    targetWidth: 600,
    targetHeight: 600,
    correctOrientation: true,
    destinationType: this.camera.DestinationType.DATA_URL
  };

  // Get the data of an image
  this.camera.getPicture(options).then((imagePath) => {
    // Special handling for Android library
    if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.SAVEDPHOTOALBUM) {
this.images.push(imagePath);



    } else {
      this.images.push(imagePath);


    }
  }, (err) => {
    this.presentToast('Error while selecting image.');
  });

}