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

IT技术 javascript jquery html local-storage
2021-01-13 01:19:56

因此，基本上，我需要上传单个图像，将其保存到 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.

我在 moz://a HACKS找到了一些解决方案，例如这个小提琴和这篇文章。

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

6个回答

对于也需要解决此问题的人：

首先，我用 抓取我的图像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如下所示：

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

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

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

在相当多的不同浏览器和版本中对其进行了测试，它似乎工作得很好。

为什么要去掉数据url的开头部分？缩小尺寸？
2021-03-13 01:19:56
请记住，本地/会话存储有大约 5MB 的限制。将二进制图像转换为 base 64 编码的字符串将使其大 30% 左右。所以这不适用于高分辨率图像。
2021-03-19 01:19:56
不支持gif，因为canvas不支持gif。
2021-03-21 01:19:56
您不需要 getBase64Image 函数。数据 url 已经是 base 64，所以当你调用 reader.readAsDataURL 时，e.target.result 发送到 reader.onload 处理程序将是你所需要的。
2021-03-21 01:19:56
请注意，您需要先完全加载图像（否则最终会出现空图像），因此在某些情况下，您需要将处理包装到：bannerImage.addEventListener("load", function () {});
2021-04-07 01:19:56

我在 localStorage JQueryImageCaching 中编写了一个 2,2kb 的保存图像的小库 ：

<img data-src="path/to/image">
<script>
    $('img').imageCaching();
</script>
2.2 千字节对于这样的东西来说是巨大的，而且我猜这甚至没有考虑 jQuery 本身的大小。我建议在没有 jQuery 的情况下编写它，也许它会更小
2021-03-11 01:19:56
根据 gitbub 为 1.74 KB
2021-03-24 01:19:56

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

要将图像存储在 localStorage 中并稍后重新加载，我使用了已接受的答案、James H. Kelly 的评论和FileReader 对象的组合。

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

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);
});

示例代码笔

其它你可能感兴趣的问题
上一篇AngularJS：为什么 ng-bind 在 angular 方面比 {{}} 更好？ 下一篇如何使用 JavaScript 重定向？