有将一个图片从一个页面传递到另一个页面的JS代码
时间: 2024-03-21 20:44:00 浏览: 48
好的,下面是一个将图片从一个页面传递到另一个页面的JavaScript代码,使用了localStorage存储图片数据的Base64编码字符串:
在页面A中,将图片转换为Base64编码字符串并存储到localStorage中:
```javascript
// 读取图片文件
var file = document.querySelector('input[type="file"]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
// 将图片文件转换为Base64编码的字符串
var base64String = reader.result.replace(/^data:image\/(png|jpg);base64,/, "");
// 存储Base64编码的字符串到localStorage中
localStorage.setItem("imageData", base64String);
}, false);
if (file) {
reader.readAsDataURL(file);
}
```
在页面B中,从localStorage中读取图片数据并显示:
```javascript
// 从localStorage中读取Base64编码的字符串
var base64String = localStorage.getItem("imageData");
// 将Base64编码的字符串赋值给img标签的src属性
document.querySelector('img').src = "data:image/png;base64," + base64String;
```
需要注意的是,localStorage的数据是以字符串形式存储的,因此需要将Base64编码的字符串存储到localStorage中,而不能直接存储图片文件。此外,如果图片文件较大,使用localStorage可能会影响页面性能。
阅读全文