Is copying Image to clipboard Supported in ios

[harshiniravula]

Describe the bug

@LuanEdCosta , I am trying to implement copying an image. It worked fine in Linux.
Failed in ios with an error saying The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. in both chrome and safari.

Same thing happened with the given demo: https://luanedcosta.github.io/copy-image-clipboard/

Isn't it suported in ios?

Browsers (please complete the following information)

Browser name: Safari
Version: 15.6

Browser name: Chrome
Version: 104.0.5112.88

Expected behavior

To be able to copy image

Screenshots

If applicable, add screenshots to help explain your problem.

[LuanEdCosta]

Hi @harshiniravula,

According with MDN Docs Safari has full support to the Clipboard API since version 13.1. Chrome also has full support for the Clipboard API since version 66.

I think that the problem is not browser support.

---

Some browsers only enable the Clipboard API under secure contexts (HTTPS)

But you said that the demo is also not working, so that's not the problem.

---

The problem could be a lack of permissions, but MDN Docs says:

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write

---

Possible Solutions

1. I exported the function requestClipboardWritePermission to request the "clipboard-write" permission (Exame from docs). Try to use it before calling the copy function.
2. Check if the user can copy an image to clipboard with the canCopyImagesToClipboard function. You can hide or disable the copy button from the user. (Example from docs).

I will try to reproduce this error. Thanks for creating this issue 😄.

[harshiniravula]

@LuanEdCosta Thanks for the quick response. Yeah I tried using requestClipboardWritePermission it gives false though I am using recent versions of Chrome and Safari in ios.

[paas10]

@LuanEdCosta I'm using the last version of the browser and I have the same issue in iOS and macOS Safari

[nathanwkwong]

Copying image from Chrome(104.0.5112.101) on macOS is fine for me, but not with Safari(15.6.1).

I searched online and can't find a way to further ask the permission. Maybe there is no way due to security restriction on Safari.

[damechen]

Same issue here!

[Codennnn]

This is a known issue in safari.

To fix it, you have to pass your promise directly into ClipboardItem, like this:

new ClipboardItem({
  'image/png': (async () => {
    const response = await fetch(`${imageSource}`) // Reference from your source code.
    return await response.blob()
  })(),
})

This workaround worked in my project.

[LuanEdCosta]

Thanks @Codennnn for figuring out a solution.

[LuanEdCosta]

I would like to test some things to see if this problem can be solved with minimum changes, but unfortunately I don't have a Mac anymore, so I will see if it is possible to test in safari with Playwright.

[oprog]

Hi,

Thanks @Codennnn! That workaround saved me hours of tries 😎

@LuanEdCosta I tested this codepen I wrote to test Codennnn workaround, both in mobile Safari (ver 17.2) and mobile Chrome (ver 120) on an iPhone 15 pro. I works.

The issue both on Safari and Chrome as pointed by @Codennnn but with Chrome too on mobile devices as confirmed by some tests I run using your codepen.

And the error is
"The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission"