javascript - 如何读取图像 blob url 或将其转换为图像？

Question

我有一个存储在本地存储中的图像。加载时显示图像。

componentDidMount() {
 const reader = new FileReader();
 reader.onload = e => {
  this.setState({ blob: e.target.result });
 };
 reader.readAsDataURL(this.props.file);
}
render() {
 return (
  <div>
   <img src={this.state.blob} />
  </div>
 )
}

文件对象如下所示：

lastModified:1535424554987
name:"test.jpeg"
preview:"blob:http://localhost:8080/b52098ca-087f83c778f0"
size:41698
type:"image/jpeg"
webkitRelativePath:""

当我刷新页面并尝试再次加载预览时，它不显示图像，并且文件对象看起来不同：

{preview: "blob:http://localhost:8080/b52098ca-087f83c778f0"}

是否可以从此网址读取图像？或者如果没有完整的文件对象就不可能渲染图像？

Answer 1

blob URL 是临时的。如果重新加载网页，blob URL 将消失。
如果要将图像保存在 localStorage 中，可以将其保存为 base64 数据。

但是，如果您的图像太大，localStorage 将不适合，因为它的限制取决于浏览器，从 5MB 到 10MB。

Answer 2

据我所知，将文件保存到 localStorage 是不可能的，这是因为它在数据上运行 JSON.stringify。