title: How to get an image src in another page using JavaScript?
body: <p>I have two HTML pages; <code>main.html</code> and <code>result.html</code>.</p>
  <p>main.html:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;img id=&quot;preview&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
      &lt;button id=&quot;done&quot; type=&quot;button&quot;&gt;done&lt;/button&gt;
  </code></pre>
  <p>result.html:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;img id=&quot;search&quot; src=&quot;&quot; alt=&quot;&quot;&gt;
  </code></pre>
  <p>In <code>main</code> page, I upload an image and the preview is shown in <code>preview</code> of <code>main</code>. And then I cropped this image using cropper js module.</p>
  <p>crop.js:</p>
  <pre><code>const done = document.getElementById('done');
  const imgcropped = document.getElementById('img-cropped');
  
  done.addEventListener('click', (e) =&gt; {
      imgcropped.src = cropper.getCroppedCanvas().toDataURL();
  })
  </code></pre>
  <p>I want to get <code>imgcropped.src</code> to the <code>search.src</code> in <code>result</code>. How can I get the <code>main</code> image to the <code>result</code>?</p>