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

Question

在Javascript（w / Angular 2+）中我有一个应用程序，我试图将dataURl保存到localstorage一旦被用户选中。目前我已经尝试了以下代码，但在检索时，我得到一个空的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上的reference answer。