Javascript

Question

我正在使用 Angular 关注 Ionic/Capacitor 的教程，这部分给我带来了一些问题：

Plugins.Camera.getPhoto({
  quality: 50,
  source: CameraSource.Prompt,
  correctOrientation: true,
  width: 200,
  resultType: CameraResultType.Base64
})
  .then(image => {
    this.selectedImage = image.base64String;

使用模板非常直接地访问 selectedImage，如下所示：

  <ion-img
          role="button"
          class="image"
          (click)="onImagePicked()"
          [src]="selectedImage"
          *ngIf="selectedImage"
  ></ion-img>

特别是我在拍照时得到这个 runtime/browser 错误：net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large) 离子调用的 URL 是 http://localhost:4200/HUGE_BASE64_STRING

现在我认为问题可能出在将图像存储为 base64 而不是内存中的 blob。但是后来我遇到了这个问题：

Convert blob to base64

所以如果我这样做了

 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = function() {
     var base64data = reader.result;                
 }

我仍然会通过这种方式将图像转换成巨大的 URL，不是吗？那么在本地存储大图片的正确方法是什么？

我认为这是一个一般的 JS 问题，而不是特定于离子的问题，因此是 JS 标签

Answer 1

设置正确的前缀解决了问题；当您检索 base64 时，它应该有这样的前缀，否则某些框架可能会在其前面添加一个 base-url：

    this.selectedImage = 'data:image/jpeg;base64,' + image.base64String;

Answer 2

您正在学习的教程已过时，请检查 docs and this official tutorial

Base64只是returnbase64的数据，你已经知道了，不能显示在img标签中。

但是有 DataUrl 结果类型，它 return 是一个合适的数据 url 可以用来显示在 img 标签中。

Answer 3

在 https://github.com/ionic-team/capacitor/blob/fc1150a1d2fe15d2ece34507c1deae4eb8b6b028/core/src/web/camera.ts#L46

上签出源代码

如果指定结果类型：CameraResultType.Uri

插件会URL.createObjectURL(PhotoBlob)

(*aprox: 获取 PhotoBlob 并创建一个 url 将从内存中提供它) 所以你只需要将它附加到 img 的 src。

如果您使用 FileReader.readAsDataURL() 插件将读取相机流并生成 Base64 数据 url ，例如 (data:content.typeOfImage/base64) 您也可以将其放在 src 字段中, 然后 img 将解码字符串并呈现它。

如果您使用 CameraResultType.Base64 插件将读取相机流并仅生成 base64 字符串而不是数据 url。如果您知道图像的内容类型，则可以通过连接生成数据 url 并具有 (data:content.typeOfImage/base64).

Javascript - 显示本地存储的大图像

Javascript - displaying large images stored locally

ionic-framework

angular

capacitor