将图像加载到localStorage并将图像src设置到该位置 [英] Loading an image to localStorage and setting an image src to that location

问题描述

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

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>

我正在寻找可以成功提供存储中图像的URL的内容， window.localStorage [name]仅返回与该键配对的值。

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.

谢谢！

Thanks!

推荐答案

在localStorage中（尽管要小心 - 有一个限制）

Well you can store the actual image data in localStorage (though be wary - there's a limit)

查看 HTML5岩石教程&向下滚动到读取文件

Have a look at the HTML5 rocks tutorial & scroll down to the bit headed READING FILES

这里正在读取文件，然后将输出放入img：src标记中。您可以另外将它放在localStorage中

Here the file is being read then the output put in the img:src tag. You could additionally put it in localStorage

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

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)

这篇关于将图像加载到localStorage并将图像src设置到该位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！