Question

所以，基本上，我需要上传一个图像，将其保存到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的下一页。

我找到了一些解决方案，例如this fiddle和this article at moz://a HACKS。

虽然我对它的工作原理仍然非常困惑，但我只需要一个简单的解决方案。基本上，我只需要在按下“保存”按钮后通过getElementByID找到图像，然后处理并保存图像。

Answer 1

对于那些也需要解决这个问题的人来说：

首先，我使用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");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

然后，在我的下一页上，我创建了一个带有空白src的图像，如下所示：

<img src="" id="tableBanner" />

当页面加载时，我使用接下来的三行来从localstorage获取base64字符串并将其应用于我创建的空白src的图像：

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;

在很多不同的浏览器和版本中对它进行了测试，它看起来效果很好。

Answer 2

您可以将图像序列化为数据URI。这个blog post有一个教程。这将生成一个可以存储在本地存储中的字符串。然后在下一页上，使用数据uri作为图像的来源。

Answer 3

document.getElementById('file').addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onloadend = () => {
    // convert file to base64 String
    const base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
    // store file
    localStorage.setItem('wallpaper', base64String);
    // display image
    document.body.style.background = `url(data:image/png;base64,${base64String})`;
  };
  reader.readAsDataURL(file);
});

Example CodePen

Answer 4

如果图像不断被裁剪，下面是一些代码，可在保存到本地存储之前获取图像文件的尺寸。

首先，我将创建一些隐藏的输入框来保存宽度和高度值

<input id="file-h" hidden type="text"/>
<input id="file-w" hidden type="text"/>

然后将文件的尺寸放入输入框

var _URL = window.URL || window.webkitURL;
$("#file-input").change(function(e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        img.onload = function() {
            $("#file-h").val(this.height);
            $("#file-w").val(this.width);
        };
        img.onerror = function() {
            alert( "not a valid file: " + file.type);
        };
        img.src = _URL.createObjectURL(file);
    }
});

最后，通过指向输入框的值来更改getBase64Image（）函数中使用的宽度和高度对象

FROM

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

要

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = $("#file-w").val();
    canvas.height = $("#file-h").val();

此外，所有文件的大小都必须保持在300kb左右。关于stackoverflow的文章涵盖了使用Javascript进行文件大小验证。

Answer 5

“请注意，您需要首先完全加载图像（否则最终将获得空图像），因此在某些情况下，您需要将处理包装到：bannerImage.addEventListener（” load“，function（）{} ）; – yuga's Nov 1 '17 at 13:04“

这非常重要。我今天下午正在探索的选项之一是使用javascript回调方法而不是addEventListeners，因为这似乎也无法正确绑定。在页面加载前准备好所有元素而无需刷新页面至关重要。

如果有人可以对此进行扩展，请这样做-例如，您是否使用settimeout，wait，回调或addEventListener方法来获得所需的结果。哪一个，为什么？

Answer 6

我想将用户上传的图片存储到localStorage中，因此我可以针对这种情况提供解决方案。我结合已接受的答案、James H. Kelly 的评论以及参考 Mozilla docs 来使用此方法。

我首先使用 FileReader 对象将上传的图像存储为 Base64 字符串：

// get user's uploaded image
const imgPath = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();

reader.addEventListener("load", function () {
    // convert image file to base64 string and save to localStorage
    localStorage.setItem("image", reader.result);
}, false);

if (imgPath) {
    reader.readAsDataURL(imgPath);
}

然后，为了从 localStorage 读回图像，我只需执行以下操作：

let img = document.getElementById('image');
img.src = localStorage.getItem('image');

如何将图像保存到localStorage并在下一页显示？

6 个答案: