所以,基本上,我需要上传一张图片,保存到localStorage,然后在下一页显示。
目前,我有我的 HTML 文件上传:
<input type='file' id="uploadBannerImage" onchange="readURL(this);" />
它使用此功能在页面上显示图像
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]); } }
图像立即显示在页面上供用户查看。然后要求他们填写表格的其余部分。这部分工作完美。
一旦表格完成,他们就会按下“保存”按钮。按下此按钮后,我将所有表单输入保存为localStorage字符串。我需要一种将图像另存为localStorage项目的方法。
localStorage
保存按钮也会将他们定向到新页面。这个新页面将在表格中显示用户数据,图像位于顶部。
如此简单明了,我需要在localStorage按下“保存”按钮后保存图像,然后从localStorage.
我在 moz://a HACKS找到了一些解决方案,例如this fiddle和this article 。
尽管我仍然对它的工作原理感到非常困惑,但我真的只需要一个简单的解决方案。基本上,我只需要在getElementByID按下“保存”按钮后找到图像,然后处理并保存图像。
getElementByID
对于同样需要解决此问题的人:
首先,我用 抓取我的图像getElementByID,并将图像保存为 Base64。然后我将 Base64 字符串保存为我的localStorage值。
bannerImage = document.getElementById('bannerImg'); imgData = getBase64Image(bannerImage); localStorage.setItem("imgData", imgData);
这是将图像转换为 Base64 字符串的函数:
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,/, ""); }
然后,在我的下一页上,我创建了一个带有空白的图像,src如下所示:
src
<img src="" id="tableBanner" />
直接在页面加载时,我使用接下来的三行从 中获取 Base64 字符串localStorage,并将其应用于带有src我创建的空白的图像:
var dataImage = localStorage.getItem('imgData'); bannerImg = document.getElementById('tableBanner'); bannerImg.src = "data:image/png;base64," + dataImage;
在很多不同的浏览器和版本中对其进行了测试,它似乎工作得很好。