Question

我尝试显示用相机拍摄的照片。

这是我的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;

谢谢您的帮助。

Answer 1

您不能直接从本地路径显示图像。在您的设备中。相反，您需要从本地路径读取该图像，然后将该数据保存到任何变量中，然后将该变量作为src分配给img标签。

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) => {

        });
}

这对我有用...

相机照片未显示离子3

1 个答案: