Storing image to Local Storage using base64 conversion, and displaying it on the next page, Angular 6

Question

I have tried the detailed solution given on How to save an image to localStorage and display it on the next page?. The issue is that the base64 converted value is same for all the images I upload and when consumed on the next page shows a blank white image .

HTML -

<input type="file" src=" " id="uploadUserImage" crossOrigin='Anonymous' (change)="readURL(this)"/>
<img src="" id="userImage" width="300" height="227">

Typescript -

readURL(input) {
  this.elementRef.nativeElement.querySelector("#userImage").style.display = "block";
  var that = this;
  var imgObj = that.elementRef.nativeElement.querySelector('#uploadUserImage');
  if (imgObj.files && imgObj.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e:any) {
      var targetObj = e.target;
      that.elementRef.nativeElement.querySelector('#userImage').src =  targetObj.result;
    }.bind(this);
    reader.readAsDataURL(imgObj.files[0]);
  }
  var userProfileImage = this.elementRef.nativeElement.querySelector('#userImage');
  var imgData = this.getBase64Image(userProfileImage);
  localStorage.setItem("imgData", imgData);
}

getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = 300;
  canvas.height = 227;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

I basically want to show this tiger image on the next page, once the user uploads on one page.

Next Page -

HTML -

<img src="" id="userProfileImage"/>

Typescript -

var dataImage = localStorage.getItem('imgData');
        var userImage = this.elementRef.nativeElement.querySelector('#userProfileImage');
        userImage.src = "data:image/png;base64," + dataImage;

Any help or guidance will be of great help or if any other way exists to achieve this than do let me know, Thanks in advance!!

First of all you are not using the possibilities of TypeScript, you have only copied the code from JavaScript. Also you are not using the possibilities of Angular 2, `that.elementRef.nativeElement.querySelector('#uploadUserImage');` this is written differently in Angular. Try to understand what the code is doing and you will find your mistakes, there are few. — onetwo12, Jun 23 '18 at 23:54
@onetwo12 I am actually not that much knowledgeable in both and hence the efforts, I had gone through this link when tried to get the element from HTML https://stackoverflow.com/questions/34890620/how-to-get-specified-htmlelement-in-my-view-using-angular2-and-typescript and for typescript can you share little more details, so that I'll start moving in a direction. Thanks for the reply. — Abhilash Bhargava, Jun 24 '18 at 05:23
@RuppalSingh I have uploaded the code on https://codepen.io/abhilash27/pen/vrzgMg Unfortunately this is giving an illegal return statement error, but it works fine in my local...Do let me know if you can help in any way on this issue. Thanks for your time!! — Abhilash Bhargava, Jun 26 '18 at 09:45

score -1 · Answer 1 · answered Sep 16 '20 at 17:24

You can use this :)

let object = {
    image: reader.result
}

localStorage.setItem("image",JSON.stringify(object))

And if you want to get the image you can use this

let object = JSON.parse(localStorage.getItem("image"))
var imageB64 = object.image

Or more simplified

let imageB64 = JSON.parse(localStorage.getItem("image")).image

Storing image to Local Storage using base64 conversion, and displaying it on the next page, Angular 6

1 Answers1