1

I'm creating graphical editor with copy/paste functionality. I want for user to be able to Ctrl+C a selected zone of an image and copy it to clipboard this way.

I know there is a method which you can use to programmatically set clipboard content, that is Clipboard.write, and in the newest Chrome versions (I have version 80) it allows to copy images too, and I don't need backward compatibility whatsoever. This would work and it works for a case of explicit "Copy" button press. But using that requires getting user's permission to write to clipboard (that is 'clipboard-write'), though it is allowed by default in Chrome.

I also know there is an event on an element, called oncopy, and there is a way to modify clipboard content being copied in it, without requesting user's permission, which is a preferred way. So what I tried is something like that:

// placing that listener on the document is a bad practice I suppose
// because it would prevent user from copying anything on the page,
// so consider that just an example code
document.oncopy = async (e) => {
    const blob = await new Promise(resolve => areaCanvas.toBlob(resolve))
    e.clipboardData.setData('image/png', blob)
}

That presumably wouldn't work because of async function. So then I tried to move blob creation higher and got this code:

let blob
// ... user selects and area ...
blob = await new Promise((resolve) => areaCanvas.toBlob(resolve))

document.oncopy = (e) => {
    e.preventDefault()
    e.clipboardData.setData('image/png', blob)
}

But this, evidently, results in an empty clipboard. So is there a way to copy an image (or canvas) to clipboard in response to Ctrl+C, without requesting user's permission to write to clipboard?

Werner Henze
  • 16,404
  • 12
  • 44
  • 69
1valdis
  • 1,009
  • 1
  • 15
  • 27
  • The whole reason this was placed behind a Permissions API is to prevent random developers from adding data to your clipboard, so no, you will always have to ask the user for permission, and run your code from an HTTPS server. Once the permission is granted though, the user shouldn't be prompted again until they reset their permissions. It's like that permissions screen most android apps have when they do a first run. After that, you can copy your data to the clipboard easily. – somethinghere Feb 20 '20 at 22:12
  • @somethinghere I understand that. Hovewer if I copy text, then I can modify `clipboardData` as I want. It seems like I don't need any permission for that. Is it different if I want to modify `clipboardData` with an image, instead of text? – 1valdis Feb 21 '20 at 04:18
  • It shouldnt be - according to this article you should only have to ask permissions to write tp the clipboard, reading you can do anyway. I found this rather enlightning and I would test it out myself but am having trouble getting it to work on a local testing server (although localhost _should_ be an expection for HTTPS requirements, I cant get the popover to show up). https://developers.google.com/web/updates/2018/03/clipboardapi – somethinghere Feb 21 '20 at 15:09

0 Answers0