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

Question

我正在关注有关 Angular 的离子/电容器的教程，这部分给我带来了一些问题：

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>

特别是，我在拍照时收到此运行时/浏览器错误：net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)ionic 调用的 URL 为http://localhost:4200/HUGE_BASE64_STRING

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

将 blob 转换为 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;