在 localStorage 中存储图像
Posted
技术标签:
【中文标题】在 localStorage 中存储图像【英文标题】：Store an image in localStorage 【发布时间】：2012-11-13 18:05:30 【问题描述】：我尝试使用 Ajax 请求将图像存储在 localStorage 中。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript">
window.onload = function()
var xmlhttp;
if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
else // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
var storedImage;
if (localStorage.getItem('imgtest'))
storedImage = localStorage.getItem('imgtest');
alert("get");
else
storedImage = xmlhttp.responseText;
localStorage.setItem('imgtest',storedImage);
alert("set");
document.getElementById("test").style.backgroundImage = 'data:image/png;base64,' + storedImage;
xmlhttp.open("GET","img.png");
xmlhttp.setRequestHeader("Content-type","image/png");
xmlhttp.send();
</script>
</head>
<body>
<div id="test" style="width: 100px; height: 100px;"></div>
</body>
</html>
我可以存储流，但图像不显示。
也许是因为我的编码，我不知道。 你能告诉我我做错了什么或者是否有更好的方法来做到这一点？
【问题讨论】：
【参考方案1】：您是否尝试过这样的 url()：
document.getElementById("test").style.backgroundImage = 'url(data:image/png;base64,' + storedImage + ')';
【讨论】：
这是一张小图，这行得通吗？<html> <body style='background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX//wAAAACLx9WPAAAADElEQVQImWNwYGgAAAFEAMFvZzHgAAAAAElFTkSuQmCC)'> </body> <html>
它正在工作，但事实是我没有iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEX//wAAAACLx9WPAAAADElEQVQImWNwYGgAAAFEAMFvZzHgAAAAAElFTkSuQmCC，我正在搜索如何获得它。
在服务器端制作它需要帮助吗？
是的。我尝试了一个返回流的 Ajax 请求，但它似乎不起作用。流看起来像是被压缩了。
字符串应该被压缩但是在base64中。如果你使用 php 服务器端，你可以这样做：echo base64_encode(file_get_contents('image.png'));【参考方案2】：
您是否尝试使用 POST 完成您的请求？
【讨论】：
是的，我做到了，但问题不在于图像上的请求，我捕获了相同的流。问题是使用该流显示图像。以上是关于在 localStorage 中存储图像的主要内容，如果未能解决你的问题，请参考以下文章
从服务器检索图像，将其存储在 localStorage 中，并显示它