从存储在本地存储中的旧 blob 创建新 blob

Question

我有基本的 html 页面，我想在其中上传图像文件，在关闭或重新加载页面后，我希望该图像在那里。 HTML 代码是：

<input type='file' accept="image/*">
<img alt="your image" height=400 width=auto>

Javascript代码：

let img = document.querySelector('img'); 

document.body.onload = () => {
    if(localStorage.image){
        let source = JSON.parse(localStorage.image)
        let file =  new File([source], 'download.jpg', {type: 'image/jpeg', lastModified: Date.now()})
        img.src = URL.createObjectURL(file)
    }
}

document.querySelector('input[type="file"]').addEventListener('change', function() {
    img.src = URL.createObjectURL(this.files[0])
    localStorage.image = JSON.stringify(img.src)
});

我的问题是：

当我console.log(localStorage.image)，在上传和重新加载页面后，我会得到一个 blob，并且由于出于安全原因我不能使用相同的 blob，我尝试制作新文件然后从该文件到创建我以后可以使用的 blob，但是当我 console.log new blob (conosle.log(img.src)) 我收到不同的 blob，所以我的问题是为什么会这样，有没有办法纠正它，我看到这些两个文件有不同的 file.size 但当我想改变它时它保持不变
还有第二种方法吗

Answer 1

由于您无法在会话之间保留 blob 对象（blob URL 将过期），您需要使用可序列化的格式，例如数据 URL。使用 FileReader 可以直接将图像文件读取为数据 url，并且可以存储在 localStorage 中。

const fileReader = new FileReader();

fileReader.addEventListener('loadend', function() {
  img.src = fileReader.result;
  storage['image'] = fileReader.result;
})

document.querySelector('input[type="file"]').addEventListener('change', function() {
    if (this.files.length > 0) {
      fileReader.readAsDataURL(this.files[0]);
    }
});

这是一支笔，我在其中修改了您的代码以使用 FileReader 和数据 URLs（由于 codepen 而不得不使用 sessionStorage，但 localStorage 应该可以工作）

https://codepen.io/Douile/pen/gOwORea?editors=1011

从存储在本地存储中的旧 blob 创建新 blob

Creating new blob from older one that is stored in local storage

javascript

blob

local-storage