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

因此，基本上，我需要上传一个图像，将其保存到 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的图像，一旦’保存’按钮被按下，然后处理和保存的图像。

250199 次浏览
小开

您可以将图像序列化为 DataURI。在这个 博客文章中有一个教程。它将生成一个可以存储在本地存储中的字符串。然后在下一页中，使用 data uri 作为图像的源。

小开
最佳答案

谁也需要解决这个问题:

首先，我用 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" />

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

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

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

小开

我在 localStorage < a href = “ https://github.com/moledet/jQueryImageCache”> JQueryImageCache 中编写了一个小小的2.2 kb 的图像保存库 用法:

<img data-src="path/to/image">
<script>
$('img').imageCaching();
</script>
小开

注意，首先需要将图像完全加载(否则将导致图像为空) ，因此在某些情况下，需要将处理包装到: bannerImage.addEventListener (“ load”，function (){}) ;-yuga Nov 1’17 at 13:04

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

如果有人可以详细说明这一点，请这样做——例如，您是否使用了 settimeout、 wait、 callback 或 addEventListener 方法来获得所需的结果。哪一个，为什么？

小开

我也遇到了同样的问题，不需要存储最终会溢出本地存储的图像，只需要存储图像的路径即可。 比如:

let imagen = ev.target.getAttribute('src');
arrayImagenes.push(imagen);
小开 
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);
});

示例 CodePen

小开

如果您的图像不断被裁剪，这里有一些代码可以在保存到本地存储之前获得图像文件的尺寸。

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

<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 ()函数中使用的 width 和 height 对象

来自

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 验证文件大小。

小开

我使用了公认的答案、詹姆斯 · H · 凯利的评论和 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');

提交答案