Фото с камеры не отображается ионным 3 - PullRequest
Новая
       36

Фото с камеры не отображается ионным 3

0 голосов
/ 12 сентября 2018

Я пытаюсь отобразить фотографию, сделанную моей камерой.

Это мой HTML: 

<ion-grid>
 <ion-row>
  <ion-col col-6>
   <button ion-button full (click)="prendreUnePhoto()">Prendre une photo</button>
  </ion-col>

  <ion-col col-6>
   <button ion-button full (click)="choisirUneImage()">Choisir une image</button>
  </ion-col>
 </ion-row>

<ion-row>
 <ion-col col-12>
  <button ion-button full (click)="envoiMail()">Envoyer Email</button>
 </ion-col>
</ion-row>


<ion-card>
 <ion-card-header>Image</ion-card-header>
 <ion-card-content>
  <img [src]="currentImage" *ngIf="currentImage"/>
 </ion-card-content>
</ion-card>

А потом, это мой TypeScript: 

currentImage = null

constructor(public navCtrl: NavController, public navParams: NavParams, private emailComposer : EmailComposer, private camera: Camera) {
  }

prendreUnePhoto() {
    const options: CameraOptions = {
      sourceType: this.camera.PictureSourceType.CAMERA,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE

    }
    this.camera.getPicture(options).then((imageData) => {
      this.currentImage = imageData;
    }, (err) => {
      // Handle error
      console.log('Image error: ', err);
    });
  }
envoiMail(){      
    let email = {
      to : 'bastien.roussel.19@gmail.com',
      subject : '[IONIC] test mail',
      body : 'Premier <b>email</b> de test depuis ionic 3',
      attachments: [
        this.currentImage
      ],
      isHtml : true
    };

    this.emailComposer.open(email);

}

Итак, я хочу показать свою фотографию на моей карточке. В чем проблема ? Я следовал многим различным учебным пособиям, я читал документацию Ionic, но я не нашел решения.

Я должен вам сказать, что: когда я нажимаю на кнопку «Послать письмо по электронной почте» (отправить письмо), моя фотография корректно отображается на моей почте с этим кодом. Но мое изображение не отображается на моей почте, если я использую: 

this.currentImage = 'data:image/jpeg;base64,' + imageData;

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 12 сентября 2018

Вы не можете отобразить изображение непосредственно с вашего локального пути. в вашем устройстве. вместо этого вам нужно прочитать это изображение из вашего локального пути, затем сохранить эти данные в любой переменной и затем присвоить эту переменную тегу img как src.

a сделали это с помощью простой функции, как показано ниже 

public currentImage**strong text**: any;

  readImage(filePath) {
    let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
    let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);
    this.file.readAsDataURL(tempPath, imageName)
        .then((res) => {
            this.currentImage= res;
        }, (err) => {

        });
}

это работает для меня ...

...