jQuery 如何将图像保存到 localStorage 并在下一页显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19183180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save an image to localStorage and display it on the next page?
提问by Fizzix
So, basically, I need to upload a single image, save it to localStorage, then display it on the next page.
所以，基本上，我需要上传单个图像，将其保存到 localStorage，然后在下一页显示。
Currently, I have my HTML file upload:
目前，我有我的 HTML 文件上传：
<input type='file' id="uploadBannerImage" onchange="readURL(this);" />
Which uses this function to display the image on the page
其中使用此功能在页面上显示图像
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]);
}
}
The image is displayed instantly on the page for the user to see. They are then asked to fill out the rest of the form. This part is working perfectly.
图像立即显示在页面上供用户查看。然后要求他们填写表格的其余部分。这部分工作正常。
Once the form is complete, they then press a 'Save' button. Once this button is pressed, I save all form inputs as localStoragestrings. I need a way to also save the image as a localStorageitem.
表格完成后，他们然后按“保存”按钮。按下此按钮后，我将所有表单输入保存为localStorage字符串。我需要一种方法也可以将图像另存为localStorage项目。
The save button will also direct them to a new page. This new page will display the users data in a table, with the image being at the top.
保存按钮也会将他们定向到新页面。这个新页面将在表格中显示用户数据，图像位于顶部。
So plain and simple, I need to save the image in localStorageonce the 'Save' button is pressed, and then loan the image on the next page from localStorage.
如此简单明了，我需要在localStorage按下“保存”按钮后保存图像，然后从localStorage.
I found some solutions such as this fiddleand this article at moz://a HACKS.
我在 moz://a HACKS找到了一些解决方案，例如这个小提琴和这篇文章。
Although I am still extremely confused on how this works, and I only really need a simple solution. Basically, I just need to find the image via getElementByIDonce the 'Save' button is pressed, and then process and save the image.
虽然我仍然对它的工作原理感到非常困惑，但我真的只需要一个简单的解决方案。基本上，我只需要在getElementByID按下“保存”按钮后找到图像，然后处理并保存图像。
回答by Fizzix
To whoever also needs this problem solved:
对于也需要解决此问题的人：
Firstly, I grab my image with getElementByID, and save the image as a Base64. Then I save the Base64 string as my localStoragevalue.
首先，我用 抓取我的图像getElementByID，并将图像保存为 Base64。然后我将 Base64 字符串保存为我的localStorage值。
bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);
Here is the function that converts the image to a Base64 string:
这是将图像转换为 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,/, "");
}
Then, on my next page I created an image with a blank srclike so:
然后，在我的下一页上，我创建了一个空白图像，src如下所示：
<img src="" id="tableBanner" />
And straight when the page loads, I use these next three lines to get the Base64 string from localStorage, and apply it to the image with the blank srcI created:
直接在页面加载时，我使用接下来的三行从 中获取 Base64 字符串localStorage，并将其应用到src我创建的空白图像：
var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;
Tested it in quite a few different browsers and versions, and it seems to work quite well.
在相当多的不同浏览器和版本中对其进行了测试，它似乎工作得很好。
回答by moledet
I wrote a little 2,2kb library of saving image in localStorage JQueryImageCachingUsage:
我在 localStorage JQueryImageCaching 中编写了一个 2,2kb 的保存图像的小库 ：
<img data-src="path/to/image">
<script>
$('img').imageCaching();
</script>
回答by Ray Wadkins
回答by Andrew Ellison Pembroke
"Note that you need to have image fully loaded first (otherwise ending up in having empty images), so in some cases you'd need to wrap handling into: bannerImage.addEventListener("load", function () {}); – yuga Nov 1 '17 at 13:04"
“请注意，您需要先完全加载图像（否则最终会出现空图像），因此在某些情况下，您需要将处理包装到：bannerImage.addEventListener("load", function () {}); – yuga 17 年 11 月 1 日 13:04"
This is extremely IMPORTANT. One of the the options i'm exploring this afternoon is using javascript callback methods rather than addEventListeners since that doesn't seem to bind correctly either. Getting all the elements ready before page load WITHOUT a page refresh is critical.
这是非常重要的。我今天下午正在探索的选项之一是使用 javascript 回调方法而不是 addEventListeners，因为它似乎也没有正确绑定。在页面加载之前准备好所有元素而不刷新页面是至关重要的。
If anyone can expand upon this please do - as in, did you use a settimeout, a wait, a callback, or an addEventListener method to get the desired result. Which one and why?
如果有人可以对此进行扩展，请执行 - 例如，您是否使用了 settimeout、等待、回调或 addEventListener 方法来获得所需的结果。哪一个？为什么？
回答by SebasCiB3R
I have come up with the same issue, instead of storing images, that eventually overflow the local storage, you can just store the path to the image. something like:
我提出了同样的问题，而不是存储图像，最终溢出本地存储，您可以只存储图像的路径。就像是：
let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);
