javascript - 将图像加载到 localStorage 并将图像 src 设置到该位置

Question

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

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

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

谢谢!

Answer 1

好吧，您可以将实际图像数据存储在 localStorage 中(但要小心 - 有一个限制)

看看the HTML5 rocks tutorial & 向下滚动到标题为 READING FILES

的位

这里正在读取文件，然后将输出放入 img:src 标签中。您还可以将其放入 localStorage

示例:http://jsfiddle.net/8V9w6/ - 选择一个图像文件，看到缩略图了吗？然后重新加载页面。缩略图应该保留在那里。 (适用于最新的 Chrome/Firefox)