javascript 将图像加载到 localStorage 并将图像 src 设置为该位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11582556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading an image to localStorage and setting an image src to that location
提问by NodeNodeNode
I've successfully allowed for a user to upload an image to local storage but I want to be able to then take that image and fill an image element on the page with that.
我已经成功地允许用户将图像上传到本地存储，但我希望能够拍摄该图像并用它填充页面上的图像元素。
<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>
I'm looking for something that will successfully give me the URL of the image in storage, seeing as "window.localStorage[name]" only returns the value paired with that key.
我正在寻找可以成功为我提供存储中图像 URL 的东西，因为“window.localStorage[name]”只返回与该键配对的值。
Thanks!
谢谢！
回答by paulslater19
Well you can store the actual image data in localStorage (though be wary - there's a limit)
好吧，您可以将实际图像数据存储在 localStorage 中（尽管要小心 - 有一个限制）
Have a look at the HTML5 rocks tutorial& scroll down to the bit headed READING FILES
看看HTML5 摇滚教程并向下滚动到阅读文件的位
Here the file is being read then the output put in the img:src tag. You could additionally put it in localStorage
这里正在读取文件，然后将输出放入 img:src 标记中。您还可以将其放入 localStorage
Example: http://jsfiddle.net/8V9w6/- select an image file, see the thumbnail? Then reload the page. The thumbnail should remain there. (Works latest Chrome/Firefox)
示例：http: //jsfiddle.net/8V9w6/- 选择一个图像文件，查看缩略图？然后重新加载页面。缩略图应该保留在那里。（适用于最新的 Chrome/Firefox）
