2

I have two HTML pages; main.html and result.html.

main.html:

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

result.html:

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

In main page, I upload an image and the preview is shown in preview of main. And then I cropped this image using cropper js module.

crop.js:

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

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

I want to get imgcropped.src to the search.src in result. How can I get the main image to the result?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
isabella
  • 31
  • 3
  • you need a relation between main.html and result.html, then you use a message system – Mister Jojo Nov 23 '20 at 14:33
  • Tho you want to open two pages at the same time or the user will navigate from main to result? In the first approach, you need really create a relation between two pages and use a message system (post message). In the second approach, you will need to forward the data to the second page as a request parameter (querystring or post). – Filipe Mendes Nov 23 '20 at 14:40

1 Answers1

1

You can do that using localStorage.

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

And in result.html:

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