我已成功允许用户将图像上传到本地存储,但我希望能够拍摄该图像并在页面上填充图像元素.
<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]”仅返回与该键配对的值.
谢谢!
解决方法
那么你可以将实际的图像数据存储在localStorage中(虽然要小心 – 有一个限制)
看看the HTML5 rocks tutorial&向下滚动到阅读文件的位置
这里正在读取文件,然后将输出放在img:src标记中.你还可以把它放在localStorage中
示例:http://jsfiddle.net/8V9w6/ – 选择图像文件,查看缩略图?然后重新加载页面.缩略图应该保留在那里. (最新的Chrome / Firefox)