如何读取图像 blob url 或将其转换为图像？答案

【问题标题】：How to read or convert an image blob url into an image?如何读取图像 blob url 或将其转换为图像？
【发布时间】：2018-08-29 12:58:33
【问题描述】：

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

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"}

是否可以从此网址读取图像？还是没有完整的文件对象就无法渲染图像？

【问题讨论】：

如果回答有帮助，请点击接受。
你解决了吗？

标签： javascript reactjs redux filereader redux-persist

【解决方案1】：

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

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

【讨论】：

确实如此，请注意 localStorage 绝对不是用来存储二进制文件的。一个是更好地使用其他存储区域，例如可以存储二进制文件的 IndexedDB。

【解决方案2】：

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

【讨论】：

它运行 toString，而不是 JSON.stringify