Javascript 剪贴板 API write() 在 Safari 中不起作用

Question

我正在使用 javascript Clipboard API 将图像复制到剪贴板。它可以在 Chrome 和 Edge 中运行，但不能在 Safari 中运行，尽管 Safari 的官方文档表示支持它。

查看文档： https: //webkit.org/blog/10855/

在此示例中（不是我的真实代码）， write() 抛出错误：

document.getElementById("copy").addEventListener("click", async function() {
    const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
    const blob = await response.blob();

    navigator.clipboard.write([new ClipboardItem({ "image/png": blob })])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
});

给定的错误是：

NotAllowedError：当前上下文中的用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

Answer 1

这是因为您在调用之前调用了await clipboard.write。苹果不允许这样做。你必须像这样直接传递你的承诺ClipboardItem：

document.getElementById("copy").addEventListener("click", async function() {
    const makeImagePromise = async () => {
        const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
        return await response.blob();
    }

    navigator.clipboard.write([new ClipboardItem({ "image/png": makeImagePromise() })])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
});