时间戳

首页 > 解决方案 > 需要在 Ionic 4 中将点击的图像捕获为 base64

ionic-framework - 需要在 Ionic 4 中将点击的图像捕获为 base64

问题描述

在网页上尝试。我正在使用 PWA、Ionic 4 和 Android。

在我的home.html我添加了一个按钮

  <!-- Trigger the file input -->
  <ion-button expand="full" (click)="captureImage()">
    <ion-icon slot="start" name="camera"></ion-icon>
    Capture Image
  </ion-button>

在我home.ts的下面有这段代码：

captureImage() {
  this.fileinput.nativeElement.click();
}

单击按钮时，它会打开选​​择选项camera app，现在当我选择相机应用程序时，它允许我单击图像。单击它后，我将返回屏幕。在这里，我想将图像获取为base64.

我怎么做？

标签： ionic-frameworkionic4

解决方案

您可以从以下位置获取文件：

this.fileinput.nativeElement.files;

要在选择后转换文件，请使用FileReader.readAsDataUrl(). 您可以在此处找到相同的完整代码： https ://forum.ionicframework.com/t/ionic-4-pwa-camera/151148/12

要存储文件： 在上传之前调用它：

upload()
{
const fileList: FileList = this. fileinput.nativeElement.files;

    if (fileList && fileList.length > 0) 
    {
      this.firstFileToBase64(fileList[0]).then((result: string) => 
      {
        this.base64File = result;
      }, (err: any) => {
        // Ignore error, do nothing
        this.base64File = null;
      });
    }
  }

  private firstFileToBase64(fileImage: File): Promise<{}> {
    return new Promise((resolve, reject) => {
      let fileReader: FileReader = new FileReader();
      if (fileReader && fileImage != null) {
        fileReader.readAsDataURL(fileImage);
        fileReader.onload = () => {
          resolve(fileReader.result);
        };

        fileReader.onerror = (error) => {
          reject(error);
        };
      } else {
        reject(new Error('No file found'));
      }
    });
  }

推荐阅读