开发者怎么检测剪切板里面的内容种类

lxf2023-04-19 18:58:02

开发者怎么检测剪切板里面的内容种类

全文详细地址:Detect the Content Type in the Clipboard

2023.03.06 By David Walsh

客户的剪切板是电脑操作系统和应用软件间的“全能采集器”。如果你应用浏览器工具时,也可以选择文字并拷贝,还可以鼠标右键点一下图象然后选择“拷贝图象”。这让我想到开发者怎么检测剪切板里面的内容种类。

你能应用 navigator.clipboard API 获取客户剪切板内容。因为剪切板很有可能包括隐秘数据,所以该 API 必须操作权限。你能应用下列 JavaScript 编码获得应用剪切板 API 的管理权限:

const result = await navigator.permissions.query({name: "clipboard-write"});
if (result.state === "granted" || result.state === "prompt") {
  // 管理权限已授于
}

授于剪切板管理权限后,你可以查看剪切板以获得 ClipboardItem 案例,其中包括已复制的详细资料:

const [item] = await navigator.clipboard.read();

// 当文字被复制到剪贴板时...
item.types // ["text/plain"]

// 当从网址拷贝图象时...
item.types // ["text/html", "image/png"]

一旦你知道了剪切板里面的内容和MIME种类,就可以使用 readText() 获得剪切板里的文字:

const content = await navigator.clipboard.readText();

针对图象,假如你有MIME种类和具体内容,你能应用数据信息URI的 <img> 开展表明。掌握客户剪切板内容针对展现她们复制的内容有很大的帮助!

我更深层次的前面新闻资讯

欢迎各位行业交流 资料分享 捞鱼 寻求帮助均可 —连接