Javascript 将映像加载到localStorage并将映像src设置到该位置

我已成功允许用户将图像上载到本地存储，但我希望能够获取该图像并用该图像填充页面上的图像元素

<h3>Please upload the image you wish to use.</h3>
<input id="photoin" type="file" accept="image/*;capture=camera"></input>
<a href="#delete_1" data-role="button" onClick="save()">Submit</a>

<script>
    var i = 0; 
    function save(){                
        var input = document.getElementById("photoin").value; 
        var name = "photo_" + i; 
        localStorage.setItem(name, input);      
        $("#QR").src = window.localStorage[name]; 
        i++; 
    }
</script>

请上传您想要使用的图像。
var i=0；
函数save（）{
var输入=document.getElementById（“photoin”）.value；
var name=“photo_u2;”+i；
setItem（名称、输入）；
$（“#QR”）.src=window.localStorage[name]；
i++；
}

我正在寻找能够成功地为我提供存储中图像的URL的东西，因为“window.localStorage[name]”只返回与该键配对的值

---

谢谢

您可以将实际的图像数据存储在本地存储中（不过要小心，这是有限制的）

查看并向下滚动至标题为读取文件的位

这里读取文件，然后将输出放入img:src标记中。您还可以将其放入本地存储中

---

示例：-选择图像文件，查看缩略图？然后重新加载页面。缩略图应该保留在那里。（适用于最新的Chrome/Firefox）

你到底为什么要这么做？浏览器缓存不足以将您的图像保存在主机上吗？我希望用户能够更改页面上的内容（即，我希望用户上载他们的图像，而不是我的，然后让该图像显示在页面上），我明白了！Mayge您可以将图像转换为base64，然后放入src=“data:image/png；”。您必须使用HTML5文件api读取图像文件，然后将数据转换为base64。这篇文章将帮助你转换：这正是我想要的！我会尝试一下，让你知道它是如何工作的！