如何将图像保存到localStorage并将其显示在下一页上？
所以基本上，我需要做的标题状态; 上传一个图像，保存到localStorage，然后显示在下一页。
目前，我有我的HTMLfile upload：
<input type='file' id="uploadBannerImage" onchange="readURL(this);" /> 其中使用此function在页面上显示图像
function readURL(input) { document.getElementById("bannerImg").style.display = "block"; if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById('bannerImg').src = e.target.result; } reader.readAsDataURL(input.files[0]); } }
图像即时显示在页面上供用户查看。 然后要求他们填写表格的其余部分。 这部分工作完美。
一旦表格完成，他们然后按下“保存”button。 一旦按下此button，我将所有表单input保存为localStoragestring。 我需要一种方法来将图像保存为localStorage项目。
保存button也将引导他们到一个新的页面。 这个新的页面将把用户数据显示在表格中，图像位于最上面。
所以简单而简单，我需要在按下“保存”button后将图像保存在localStorage ，然后从localStorage的下一页上借出图像。
我发现了一些解决scheme，如这个小提琴： http : //jsfiddle.net/8V9w6/
而这个： https ： //hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/
虽然我对这个工作仍然非常困惑，但我只是真的需要一个简单的解决scheme。 基本上，我只需要通过getElementByIDfind图像，一旦按下“保存”button，然后处理并保存图像。
所有的帮助，非常感谢。 谢谢！
谁也需要解决这个问题：
首先，我用getElementByID抓取图像，并将图像保存为Base64。 然后我将Base64string保存为localStorage值。
bannerImage = document.getElementById('bannerImg'); imgData = getBase64Image(bannerImage); localStorage.setItem("imgData", imgData);
这里是将图像转换为Base64的function：
function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); }
然后，在我的下一页，我创build了一个像这样的空白src的图像：
<img src="" id="tableBanner" />
直接加载页面时，我使用下面三行从localstorage获取base64string，并将其应用到具有我创build的空白src的图像：
var dataImage = localStorage.getItem('imgData'); bannerImg = document.getElementById('tableBanner'); bannerImg.src = "data:image/png;base64," + dataImage;
testing它在不同的浏览器和版本，它似乎工作得很好。
我写了一个在localStorage JQueryImageCaching中保存图像的小小的2.2kb库用法：
<img data-src="path/to/image"> <script> $('img').imageCaching(); </script>
您可以将图像序列化为数据URI。 这篇博客中有一篇教程。 这将产生一个string，你可以存储在本地存储。 然后在下一页，使用数据uri作为图像的来源。
