Image 离子3图像选择器&；像instagram一样预览

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

我尝试过cordova插件照片库，但没有限制功能，所以我必须从用户相册中获取所有照片，这可能是非常大的容量。用户必须等待所有照片加载后才能单击并选择一张照片。这真是糟糕的用户体验

---

有人有主意吗？谢谢。

您可以使用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.');
  });

}

#查看
#选择方法
公众陈述书（）{
让actionSheet=this.actionSheetCtrl.create({
标题：“选择方法”，
按钮：[
{
文字：“画廊”，
处理程序：（）=>{
this.takePicture（this.camera.PictureSourceType.SAVEDPHOTOALBUM）；
}
},
{
文本：“拍摄图像”，
处理程序：（）=>{
this.takePicture（this.camera.PictureSourceType.camera）；
}
},
{
文本：“取消”，
角色：“取消”
}
]
});
actionSheet.present（）；
}
公共拍摄图片（源类型）{
//为“摄影机”对话框创建选项
变量选项={
质量：100，
sourceType:sourceType，
编码类型：this.camera.encodingType.JPEG，
允许：是的，
saveToPhotoAlbum：对，
目标宽度：600，
目标：600，
对,，
destinationType:this.camera.destinationType.DATA\u URL
};
//获取图像的数据
这个.camera.getPicture（选项）。然后（（imagePath）=>{
//Android库的特殊处理
if（this.platform.is（'android'）&&sourceType==this.camera.PictureSourceType.SAVEDPHOTOALBUM）{
this.images.push（imagePath）；
}否则{
this.images.push（imagePath）；
}
}，（错误）=>{
this.presentToast（'选择图像时出错'）；
});
}

他的问题是关于限制照片数量。类似于查询选择器：top和skip。感谢mohammad mahmoodi，但此解决方案不允许我在用户选择图片时通过添加实时预览框来更改UI（就像Instagram一样）。或者你知道怎样才能做到这一点吗？@pezetter说的没错。有什么想法吗？谢谢。你找到这个问题的解决办法了吗？