Как использовать ImagePicker для выбора изображения и отображения в Ionic Native - PullRequest
Новая
       21

Как использовать ImagePicker для выбора изображения и отображения в Ionic Native

0 голосов
/ 01 июня 2019

Я занимаюсь разработкой приложения Ionic, и одной из задач является выбор профиля с помощью камеры или галереи, и я использую Ionic Native ImagePicker для выбора изображения и обрезки, его можно выбирать и обрезать, но не отображать на передней html-странице, мой код, как показано ниже: 

openImagePickerCrop(){
  this.imagePicker.hasReadPermission().then(
    (result) => {
      if(result == false){
        // no callbacks required as this opens a popup which returns async
        this.imagePicker.requestReadPermission();
      }
      else if(result == true){
        this.imagePicker.getPictures({
          maximumImagesCount: 3
        }).then(
          (results) => {
            for (var i = 0; i < results.length; i++) {

              this.crop.crop(results[i], {quality: 100}).then(
                newImage => {
                  this.imgResponse.push('data:image/jpeg;base64,' + newImage);
                  console.log("Image selected - " + newImage);
                },
                error => console.error("Error cropping image", error)
              );

            }
          }, (err) => console.log(err)
        );
      }
    }, (err) => {
      console.log(err);
    });
  }

А это мой HTML-код: 

<ion-item class="input-item">
          <ion-label position="floating">Photo</ion-label>
          <div class='images' *ngFor="let img of imgResponse">
            <img src="{{img}}" alt="" srcset="" />
          </div>
          <ion-card-content>
            <ion-button color="medium" size="large" (click)="openImagePickerCrop()">
              <ion-icon slot="icon-only" name="camera"></ion-icon>
            </ion-button>
          </ion-card-content>
      </ion-item>

Где я делаю не так, пожалуйста, помогите.

Обновление:

Чтобы проверить, связано ли это с функцией обрезки, я обновил функции, как показано ниже: 

openImagePicker(){
this.imagePicker.hasReadPermission().then(
  (result) => {
    if(result == false){
      // no callbacks required as this opens a popup which returns async
      this.imagePicker.requestReadPermission();
    }
    else if(result == true){
      this.imagePicker.getPictures({
        maximumImagesCount: 1
      }).then(
        (results) => {

          for (var i = 0; i < results.length; i++) {
            this.imgResponse.push('data:image/jpeg;base64,' + results[i]);
            console.log("Image selected - " + results[i]);
          }
        }, (err) => console.log(err)
      );
    }
  }, (err) => {
    console.log(err);
  });
}

Но все равно не работает, и консоль ничего не записывает.

...