如何将图片Blob网址读取或转换为图片?

问题描述：

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

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网址读取或转换为图片?

相关推荐