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 的限制，具体取决于浏览器。