Сохранение изображения в Local Storage с использованием преобразования base64 и отображение его на следующей странице, Angular 6 - PullRequest
Новая
       14

Сохранение изображения в Local Storage с использованием преобразования base64 и отображение его на следующей странице, Angular 6

0 голосов
/ 24 июня 2018

Я пробовал подробное решение, приведенное на Как сохранить изображение в localStorage и отобразить его на следующей странице? . Проблема в том, что преобразованное значение base64 одинаково для всех загружаемых мной изображений Sample image used for the code, и при использовании на следующей странице отображается пустое белое изображение Base64 converted back to image on https://codebeautify.org/base64-to-image-converter.

HTML - 

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

машинопись - 

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,/, "");
}

Я хочу показать это изображение тигра на следующей странице, как только пользователь загрузит его на одну страницу.

Следующая страница -

HTML - 

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

машинопись - 

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

Любая помощь или руководство окажут большую помощь или, если есть какой-либо другой способ для достижения этой цели, кроме как, дайте мне знать, заранее спасибо !!

...