Question

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

我已经尝试过cordova-plugin-photo-library here，但是没有限制功能所以我必须从用户专辑中获取所有照片，这可能是非常大的音量。用户必须等到所有照片都加载后才能点击并选择一张图片。这真是糟糕的用户体验。

有人有想法吗？感谢。

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.');
  });

}

离子3图像选择器＆amp;预览像instagram

1 个答案: