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

时间:2012-07-20 15:37:16

标签: javascript html5 local-storage

我已成功允许用户将图像上传到本地存储,但我希望能够拍摄该图像并使用该图像填充页面上的图像元素。

<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]”仅返回与该键配对的值。

谢谢!

1 个答案:

答案 0 :(得分:12)

那么你可以将实际的图像数据存储在localStorage中(虽然要小心 - 有限制)

查看the HTML5 rocks tutorial&amp;向下滚动到阅读文件

此处正在读取文件,然后将输出放在img:src标记中。您还可以将其放入localStorage

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