title: Copy image to clipboard using JavaScript
body: <p>I am trying to <strong>copy an image to clipboard</strong> using JavaScript. I have tried <a href="https://stackoverflow.com/questions/33175909/copy-image-to-clipboard/40547470#40547470">these solutions</a> but get the error: </p>
  
  <pre><code>Uncaught (in promise) DOMException: Document is not focused.
  </code></pre>
  
  <p>There is this <a href="https://web.dev/image-support-for-async-clipboard/#images" rel="nofollow noreferrer">article</a> which shows: </p>
  
  <pre><code>try {
    const imgURL = '/images/generic/file.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
    console.log('Image copied.');
  } catch(e) {
    console.error(e, e.message);
  }
  </code></pre>
  
  <p>But this gives the error:</p>
  
  <pre><code>VM2303:12 TypeError: Failed to fetch "Failed to fetch"
  </code></pre>
  
  <p>...along with CORS warning.</p>
  
  <p>I have also tried <strong><a href="https://stackoverflow.com/questions/12168909/blob-from-dataurl">converting an image data URI into a blob</a></strong> and using: </p>
  
  <pre><code>navigator.clipboard.write([
      new ClipboardItem({
          'image/png': blob
      })
  ])
  </code></pre>
  
  <p>...but this also gives the following error: </p>
  
  <pre><code>Uncaught (in promise) DOMException: Document is not focused
  </code></pre>
  
  <p>Note that I only need to do this with <strong>local images</strong> uploaded client-side (has a data URI as source). So everything is on the same server and requires no back-end.</p>