如何将图像保存到localStorage并将其显示在下一页上？ [英] How to save an image to localStorage and display it on the next page?

问题描述

所以基本上，我需要按照标题状态来做;上传一张图片，保存到localStorage，然后显示在下一页。

目前，我已经上传了我的HTML文件：

 < input type ='file'id =uploadBannerImageonchange =readURL（this）; /> 
  

使用此功能在页面上显示图片

 函数readURL（输入）
 {
 document.getElementById（bannerImg）。style.display =block; （input.files&& input.files [0]）{
 var reader = new FileReader（）; 
 
 if 
 
 reader.onload = function（e）{
 document.getElementById（'bannerImg'）。src = e.target.result; 
} 
 
 reader.readAsDataURL（input.files [0]）; 
 
 
 
 
 $ b $ p 
 $ b 
该图片即时显示在用户页面上查看。然后要求他们填写表格的其余部分。这部分工作完美。
 
 
 
一旦表格完成，他们然后按'保存'按钮。一旦按下此按钮，我将所有表单输入保存为 localStorage 字符串。我需要一种将图像保存为 localStorage 项目的方法。
 
 
 
保存按钮还会将它们指向一个新的页面。这个新的页面会在表格中显示用户数据，图像位于顶部。
 
 
 
这么简单，我需要将图像保存在 localStorage 一旦按下'保存'按钮，然后从 localStorage 中下一页的图像。
 
 
 
我发现了一些解决方案，例如这个小提琴： http://jsfiddle.net/8V9w6/   
 
 
而且： https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/  
 
 
 
虽然我仍然对此如何工作非常困惑，而我只是真的需要一个简单的解决方案。基本上，我只需要通过 getElementByID 找到图片，然后处理并保存图片。
 
 
 
非常感谢所有帮助。感谢！
解决方案
任何人也需要解决此问题：
 
 
首先，我用 getElementByID 获取图像，并将图像保存为Base64。然后，我将Base64字符串保存为localStorage值。 
 
 
  bannerImage = document.getElementById（'bannerImg'）; 
 imgData = getBase64Image（bannerImage）; 
 localStorage.setItem（imgData，imgData）; 
  
这是将图像转换为Base64 sting的函数：
  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）; 
 
返回dataURL.replace（/ ^ data：image\ /（png | jpg）; base64，/，）; 
} 
  
然后，在我的下一页，我创建了一个像这样的空白src的图像： 
 
 
 < img src =id =tableBanner/> 
  
直接在页面加载时，我使用下面三行从localstorage获取base64字符串，将它应用到我创建空白src的图像中：
 $ b $ pre $ var dataImage = localStorage.getItem（'imgData'）; 
 bannerImg = document.getElementById（'tableBanner'）; 
 bannerImg.src =data：image / png; base64，+ dataImage; 
  

在很多不同的浏览器和版本中测试它，它似乎工作得很好。

So basically, I need to do as the title states; Upload a single image, save it to localStorage, then display it on the next page.

Currently, I have my HTML file upload:

<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 localStorage strings. I need a way to also save the image as a localStorage item.

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 localStorage once the 'Save' button is pressed, and then loan the image on the next page from localStorage.

I found some solutions such as this fiddle: http://jsfiddle.net/8V9w6/

And this: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

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 getElementByID once the 'Save' button is pressed, and then process and save the image.

All help is greatly appreciated. Thanks!

解决方案

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 localStorage value.

bannerImage = document.getElementById('bannerImg');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

Here is the function that converts the image to a Base64 sting:

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 src like so:

<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 src I created:

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.

这篇关于如何将图像保存到localStorage并将其显示在下一页上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！