如何使用JavaScript在另一个页面中获取图像src?

Question

我有两个HTML页面;main.html和result.html.

主.html：

<img id="preview" src="" alt="">
<button id="done" type="button">done</button>

结果.html：

<img id="search" src="" alt="">

在main页面中，我上传了一张图片，预览显示在mainpreview中。然后我使用裁剪器 js 模块裁剪了这个图像。

裁剪.js：

const done = document.getElementById('done');
const imgcropped = document.getElementById('img-cropped');
done.addEventListener('click', (e) => {
imgcropped.src = cropper.getCroppedCanvas().toDataURL();
})

我想imgcropped.srcresult的search.src.如何将main图像获取到result？

Answer 1

您可以使用localStorage

.在主.html：

const done = document.getElementById('done');
const imgcropped = document.getElementById('img-cropped');
done.addEventListener('click', (e) => {
var newSrc = cropper.getCroppedCanvas().toDataURL();
imgcropped.src = newSrc;
window.localStorage.setItem("imgcropped", newSrc);
});

结果.html：

var searchImg = document.getElementById("search")
if(window.localStorage.getItem("imgcropped") !== null){
searchImg.src = window.localStorage.getItem("imgcropped");
}