Javascript - displaying large images stored locally

Question

I am following a tutorial on Ionic/Capacitor with Angular and this part here is causing me some problems:

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

With the template accessing selectedImage pretty straightforwardly, like this:

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

In particular I get this runtime/browser error upon taking the picture: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large) with the URL called by ionic being http://localhost:4200/HUGE_BASE64_STRING

Now I thought the problem might be storing the image as base64 instead of a blob in memory. But then I came across this question:

Convert blob to base64

So if I did

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

I would still convert the image to a huge URL this way, no? So what is the proper way to store a big image locally?

I assume this is a general JS question, not an ionic specific one, hence the JS tag

Answer 1

Setting the right prefix solved the problem; when you retrieve a base64 it should have a prefix like this, otherwise some frameworks might prepend a base-url to it:

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