JavaScriptを使用して別のページで画像srcを取得するにはどうすればよいですか？[複製]

Question

2つのHTMLページがあります。main.htmlおよびresult.html。

main.html：

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

result.html：

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

ではmainページ、私は画像をアップロードするとプレビューがに示されてpreviewのmain。そして、cropperjsモジュールを使用してこの画像をトリミングしました。

Crop.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ますか？

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");
}