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

我已经成功地允许用户将图像上载到本地存储，但我希望能够在图像上填充图像元素接着就，随即。将图像加载到localStorage并将图像src设置到该位置

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

谢谢！

来源

2012-07-20 NodeNodeNode

为什么你要这样做？浏览器缓存不足以将您的图像保存在主机上？ – devundef 2012-07-20 15:41:36

我希望用户能够更改页面上的内容（即，我希望用户上传他们的图像，而不是我的图像，然后让该图像出现在页面上） – NodeNodeNode 2012-07-20 15:55:25

我明白了！ Mayge你可以将图像转换为base64，然后放入src =“data：image/png; <.. base64图像数据...>”。您必须使用HTML5文件api来读取图像文件，然后将数据转换为base64。这篇文章将帮助你转换：http://stackoverflow.com/questions/246801/how-can-you-encode-to-base64-using-javascript#246813 – devundef 2012-07-20 16:08:34

那么你可以存储在localStorage的实际图像数据（不过要小心 - 有限制）

看一看the HTML5 rocks tutorial &向下滚动到比特为首读取文件

这里，文件正在读取，然后输出到img：src标签中。你可以额外把它放在localStorage

例如：http://jsfiddle.net/8V9w6/ - 选择一个图像文件，看到缩略图？然后重新加载页面。缩略图应该保留在那里。（Works latest Chrome/Firefox）

来源

2012-07-20 16:44:00 paulslater19

这正是我想要的！我会试试看，让你知道它的工作方式！ – NodeNodeNode 2012-07-20 18:31:19

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

回答

相关问题