copy to clipboard only works on localhost

Question

I have the following function to copy to the clipboard:

function getScreenShot(target){

var src = document.getElementById(target);


html2canvas(src).then(function(canvas) {
    //document.src.appendChild(canvas);
    canvas.toBlob(function(blob) {
        navigator.clipboard
        .write([
            new ClipboardItem(
            Object.defineProperty({}, blob.type, {
                value: blob,
                enumerable: true
            })
            )
        ])
        .then(function() {
            // do something
        });
    });
}

This works only on my localhost. When I run it on the server, the content doesn't get copied. I read that it has to do with security issue. How do I solve it?

It tells me: Uncaught (in promise) DOMException: Write permission denied. Any idea how to alter the above code to solve this? — AAA, Jan 31 '23 at 23:09
You should have googled the error message: https://stackoverflow.com/a/61546346/9077347 — Ibrahim Hammed, Jan 31 '23 at 23:43
Why not use an async function with await? `async function copyTextToClipboard(textStr) { await navigator.clipboard.writeText(textStr) }` use this with a ***try / catch*** to throw any errors for debugging... — dale landry, Feb 01 '23 at 00:18
@dalelandry the text string seems to be a literal. What if I want to do this 1? — AAA, Feb 01 '23 at 01:00

score 2 · Answer 1 · answered Feb 01 '23 at 10:01

Here's a working version of the code. Note that images need to be on the same origin, or proxied.

const button = document.querySelector('button');

const createScreenshot = async (root) => {
  const canvas = await html2canvas(root);
  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      resolve(blob);
    });
  });
};

button.addEventListener('click', async () => {
  button.style.display = 'none';
  const blob = await createScreenshot(document.body);
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);    
  } catch (err) {
    alert(`${err.name}: ${err.message}.`);
  } finally {
    button.style.display = '';
  }
});

You can see this code in action at https://sugary-hickory-pixie.glitch.me/.

copy to clipboard only works on localhost

1 Answers1