如何在 Firefox 中将图像复制到剪贴板

Question

在我的页面上，我希望用户有一个选项，可以单击按钮并将图像保存在剪贴板中。我正在使用此代码：

navigator.clipboard.write([
    new ClipboardItem({
            'image/png': blob
    })
]);

根据此https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write这不适用于Firefox。但没有什么好的选择。

我发现了这个，但它不适用于网页，仅适用于插件https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/clipboard/setImageData

我也知道这曾经是用

execComend()

完成的，但根据这个 https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand 它已被弃用。

那么如何在 Firefox 上实现将图像复制到剪贴板这样的基本任务呢？

Answer 1

我做了很多研究，因为我遇到了同样的问题。目前，这是不可能的。

execCommand

听起来很有希望，但它实际上并没有复制图像，而是包含图像的富文本段。如果这适合您的需要，那么您也可以使用剪贴板 API 复制 html，firefox 支持：

const url = URL.createObjectURL(blob)
navigator.clipboard.write([
    new ClipboardItem({
            'text/html': `<img src=${url} />`
    })
]).catch(e => {
  // Just in case!
}).then(() => URL.revokeObjectURL(blob));

请注意，粘贴富文本段仅受一组有限的应用程序支持，即这适用于大多数富文本编辑器（如 Pages 或 gmail），但不适用于需要图像或纯文本的输入（例如，您无法将其粘贴到文件中）经理或大多数消息应用程序）

如果这不符合您的需求，那么您应该通知用户，如果承诺拒绝，他们的浏览器不支持复制图像，也许可以让他们选择下载文件。