使用base64转换将图像存储到本地存储，并显示在下一页，Angular 6答案

【问题标题】：Storing image to Local Storage using base64 conversion, and displaying it on the next page, Angular 6使用base64转换将图像存储到本地存储，并显示在下一页，Angular 6
【发布时间】：2018-12-02 22:59:36
【问题描述】：

我已经尝试了How to save an image to localStorage and display it on the next page? 上给出的详细解决方案。问题是我上传的所有图像的base64 转换值都是相同的，当在下一页使用时显示空白图像。

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;

任何帮助或指导都会有很大帮助，或者如果有任何其他方法可以实现这一点，请告诉我，提前致谢！！

【问题讨论】：

首先你没有使用 TypeScript 的可能性，你只是从 JavaScript 复制代码。此外，您没有使用 Angular 2 的可能性，that.elementRef.nativeElement.querySelector('#uploadUserImage'); 这在 Angular 中的编写方式不同。试着理解代码在做什么，你会发现你的错误，很少。
@onetwo12 实际上我对这两个方面都不太了解，因此我在尝试从 HTML stackoverflow.com/questions/34890620/… 获取元素时已经通过此链接，对于打字稿，您能否分享更多细节，这样我就开始朝着一个方向前进。感谢您的回复。
能否分享一个 CodePen 或 JSFiddle 来解决您的问题？
@RuppalSingh 我已将代码上传到codepen.io/abhilash27/pen/vrzgMg 不幸的是，这给出了一个非法的返回语句错误，但它在我的本地运行良好......如果你能以任何方式提供帮助，请告诉我在这个问题上。感谢您的宝贵时间！

标签： html typescript local-storage angular6

【解决方案1】：

你可以用这个:)

let object = {
    image: reader.result
}

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

如果你想得到图像，你可以使用这个

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

或者更简化

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

【讨论】：