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

Question

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

HTML

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

Angular 文件存储和检索功能

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

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

这是reference answer就这样。