Javascript：如何将文件位置保存到本地存储？

Question

在Javascript（带有Angular 2+）中，我有一个应用程序，试图在用户选择了dataURl之后将其保存到本地存储中。 目前，我已经尝试了以下代码，但是在检索时，我得到了一个空的obj {}作为主体。

HTML

<input style="display:none;" type="file" (change)="fileEvent($event)" #file>

角度文件存储和检索功能

fileEvent(ev: any): void {
    console.log('Event select file', ev);    
    let obj: any = ev.target.files[0];
    let file: File = {
      Key: obj.name,
      ContentType: obj.type,
      Size: obj.size,
      Body: obj      
    };
    localStorage.setItem("myapp", JSON.stringify(file);
}

getFileFromLocalStorage {
     console.log(JSON.parse(localStorage.getItem("myapp"));
}

下面的文件检索响应

Answer 1

您不能像这样将图像直接存储到本地存储。 首先，您需要将图像转换为Base64。 然后将Base64字符串保存在localStorage值中。

下面是将Image转换为Base64的函数：

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

现在，您可以将其保存到本地存储中。

这是关于SO的参考答案 。