javascript - 如何使用 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页面中，我上传了一张图片，预览显示preview在main. 然后我使用cropper js 模块裁剪了这张图片。

作物.js：

const done = document.getElementById('done');
const imgcropped = document.getElementById('img-cropped');

done.addEventListener('click', (e) => {
    imgcropped.src = cropper.getCroppedCanvas().toDataURL();
})

我想imgcropped.src进去search.src。result我怎样才能得到main图像result？

标签： javascripthtml

Answer 1

您可以使用localStorage.

在 main.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);
});

在 result.html 中：

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