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

Я пробовал подробное решение, приведенное в разделе Как сохранить изображение на localStorage и отобразить его на следующей странице? , Проблема в том, что преобразованное значение base64 одинаково для всех загружаемых изображений, Пример изображения, используемого для кодаа при использовании на следующей странице отображается пустое белое изображение Base64 преобразован обратно в изображение на 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;

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

html,html5,typescript,local-storage,angular6,

1

Ответов: 0

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

Я пробовал подробное решение, приведенное в разделе Как сохранить изображение на localStorage и отобразить его на следующей странице? , Проблема в том, что преобразованное значение base64 одинаково для всех загружаемых изображений, Пример изображения, используемого для кодаа при использовании на следующей странице отображается пустое белое изображение Base64 преобразован обратно в изображение на 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;

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

01HTML, html5, машинопись, локальное хранение, angular6,
Похожие вопросы