所以,基本上,我需要上传一个图像,将其保存到localStorage,然后在下一页显示.
目前,我上传了我的HTML文件:
<input type='file' id="uploadBannerImage" onchange="readURL(this);" />
Run Code Online (Sandbox Code Playgroud)
其中使用此功能在页面上显示图像
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]);
}
}
Run Code Online (Sandbox Code Playgroud)
图像立即显示在页面上供用户查看.然后要求他们填写表格的其余部分.这部分工作得很好.
表单完成后,然后按"保存"按钮.按下此按钮后,我将所有表单输入保存为localStorage字符串.我需要一种方法来将图像保存为localStorage项目.
保存按钮也会将它们指向新页面.此新页面将在表格中显示用户数据,图像位于顶部.
如此简单明了,我需要在localStorage按下"保存"按钮后保存图像,然后将图像借给下一页localStorage.
我在moz:// a HACKS找到了一些解决方案,比如这个小提琴和这篇文章.
虽然我对它的工作方式仍然非常困惑,但我只需要一个简单的解决方案.基本上,我只需要在getElementByID按下"保存"按钮后找到图像,然后处理并保存图像.
我试图找到一种方法将.jpg文件从我的网站存储到本地存储中以提高网站速度.理论上很简单:将picture.jpg转换为base64字符串,并将其与setitem一起存储到localstorage中.再次显示图片只需从localstorage加载base64字符串并解码回jpg.但是,与往常一样,这种做法更加困难.我试图找到一种方法,使用html5或javascript(没有PHP!)将.jpg文件即时转换为base64.有人有同样的问题,能够找到解决方案并可以共享代码吗?