如何保存用户上传的图像到' localStorage '，并用它来改变'背景图像'使用JS?

Question

我试图添加到localStorage用户上传的图像，并使用它作为页面的持久背景图像。

我已经有了上传和更改背景的功能，但不能将其保存到localStorage..怎么做呢?

这是我目前为止的代码:

const frame = document.getElementById('frame');
const file = document.getElementById('file');
const reader = new FileReader();
const userUploadedBackground = document.getElementById('image');
const imgData = getBase64Image(userUploadedBackground);
localStorage.setItem("imgData", imgData);
reader.addEventListener("load", function() {
frame.style.backgroundImage = `url(${ reader.result })`;
}, false);
file.addEventListener('change', function() {
const image = this.files[0];
if (image) reader.readAsDataURL(image);
}, false)

#frame {
width: 200px;
height: 200px;
background-size: cover;
}

<input id='file' type='file' />
<div id='frame'></div>

事先感谢您的帮助。

Answer 1

要完成此操作，您必须将照片上传到某处，然后将url存储在本地存储中。然后你可以使用事件监听器加载它，并应用到JS中的document.body.style