🎉 如何在 JavaScript 中将图片或文本复制到剪贴板 (2022) ☘️

异步剪贴板 API

嘿，大家好😃

网站上一个非常受欢迎的功能是能够将元素复制到剪贴板。复制文本很容易找到库，但是复制图片呢？

使用Clipboard.js之类的库非常普遍。但是，现在有了一个新的 JavaScript API，用于异步剪贴板访问，虽然规范尚不完善，但已经相当先进。

注意：异步剪贴板 API 方法是规范中新增的内容，可能并非所有浏览器都完全支持。使用前请务必查看每种方法的兼容性表格，以确保其支持范围足以满足您的需求。

由于存在滥用的可能性，定义了两种权限，允许用户代理赋予我们控制异步 API 使用方式的权限。

为避免滥用风险并作为一项安全措施，正确使用剪贴板 API需要 2 个权限。

本文将仅关注copy将文本或图像复制到剪贴板的功能。

与许多新 API 一样，navigator.clipboard此功能仅支持通过 HTTPS 协议提供的页面。为防止滥用，仅当页面处于活动标签页时才允许访问剪贴板。

注意：活动标签页中的页面无需请求权限即可复制write到剪贴板。

如果您想访问剪贴板中的数据，请点击此处。

以下函数用于显示用户是否可以复制文本或图像：

要将图像或文本等项目复制到剪贴板，操作非常简单。剪贴板 API 提供了 `copy()`write()和 ` writeText()copy()`（仅适用于文本）方法。

警告：并非所有浏览器都支持以下方法。因此，如果您想在生产环境中使用这些方法，请务必谨慎。（请点击此处查看当前兼容性信息）

要将文本复制到剪贴板，请调用 `copy()` 方法navigator.clipboard.writeText()。剪贴板内容更新后，Promise 对象将被解析。如果调用者没有写入剪贴板的权限，则 Promise 对象将被拒绝。

要将图像复制到剪贴板，请调用navigator.clipboard.write()（这与方法相同writeText，但它更通用，也适用于复制文本）。

将对象数组ClipboardItem作为参数传递给该write()方法。

注意：截至撰写本文时，仅支持 PNG 文件，并且您只能将一张图片传递到剪贴板。

就是这样，如果你想支持某些浏览器，在使用这个新的API之前，你需要耐心等待一段时间（几乎完成了！）。

您还可以通过 Jason Miller ( @_developit ) 的这篇文章了解更多关于异步剪贴板 API 的信息。

干杯!