如何将图片Blob网址读取或转换为图片? [英] How to read or convert an image blob url into an image?

问题描述

我有一张存储在本地存储器中的图像.加载后会显示图像.

I have an image that is stored in local storage. On load the image is displayed.

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

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

When I refresh the page and try to load the preview again, it doesn't display the image, and the file object looks different:

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

是否可以从该URL读取图像?还是在没有完整文件对象的情况下无法渲染图像?

Is it possible to read the image from this url? Or is it impossible to render the image without the full file object?

推荐答案

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

blob URL is temporary. if you reload the web page, the blob URL will gone.
If you want to save the image in localStorage you can save it as base64 data.

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

But if your image is too big localStorage won't suit because it has limits which depend on the browser from 5MB to 10MB.

这篇关于如何将图片Blob网址读取或转换为图片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！