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

Loading an image to localStorage and setting an image src to that location

本文关键字:图像 设置 src 位置 加载 localStorage      更新时间:2023-12-22

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

<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中(不过要小心-有限制)

看看HTML5岩石教程&向下滚动到标题为正在读取文件的位

这里读取文件,然后将输出放入img:src标记中。你还可以把它放在本地存储中

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