navigator.clipboard.read 读不到图片和 HTML 是因为浏览器默认仅支持 text/plain，其他类型需显式申请 clipboard-read 权限并用户授权；API 返回 ClipboardItem 列表，须手动调用 getType() 解析，且各浏览器兼容性差异大（Chrome/Edge 支持较全，Safari 不支持图片，Firefox 不支持 read）。
为什么 navigator.clipboard.read 读不到图片和 HTML？
因为浏览器默认只允许读取纯文本（text/plain），其他类型如 image/png 或 text/html 需要显式请求权限且用户主动授权。调用 navigator.clipboard.read() 本身不会自动解析富文本结构，它返回的是原始 ClipboardItem 列表，每个项需手动调用 .getType() 解析——而多数剪贴板内容（比如从网页复制的带样式的 HTML+图片）实际以 text/html 和 text/plain 共存，图片则可能作为内联 data: URI 存在其中，也可能单独以 image/* 类型存在。
必须先申请 clipboard-read 权限并处理跨源限制
Chrome/Edge 120+ 和 Safari 17.4+ 支持该 API，但需满足两个前提：
- 页面运行在
https://或localhost上（HTTP 不行） - 必须在用户手势（如点击、键盘事件）中调用，不能在页面加载时静默请求
- 需显式调用
navigator.permissions.query({ name: 'clipboard-read' })并等待 granted 状态，否则read()会直接 reject
示例关键逻辑：
async function readRichClipboard() {
try {
const perm = await navigator.permissions.query({ name: 'clipboard-read' });
if (perm.state === 'denied') throw new Error('Permission denied');
if (perm.state === 'prompt') await perm.request(); // 触发弹窗
const items = await navigator.clipboard.read();
// 后续遍历 items 处理
} catch (err) {
console.error('Read failed:', err);
}
}
如何从 ClipboardItem 中提取 HTML 和内联图片
ClipboardItem 的 .types 属性列出可用 MIME 类型，但不保证所有类型都可读；必须对每个类型调用 .getType(type) 获取 Blob，并注意它返回 Promise。常见组合是：text/html（含 img 标签 + data URI）、text/plain（降级文本）、image/png（单独粘贴的图）。
立即学习“前端免费学习笔记（深入）”；
-
text/html内容通常包含<img src="data:image/png;base64,...">，可直接用URL.createObjectURL(blob)转为可显示 URL - 若存在独立
image/*类型，需分别读取其 Blob 并转为 URL，但要注意：部分系统（如 macOS）复制网页时并不暴露独立图片项，只塞进 HTML - 不要假设
items[0]就是 HTML——应遍历items[i].types查找匹配项
简略提取逻辑：
for (const item of items) {
if (item.types.includes('text/html')) {
const htmlBlob = await item.getType('text/html');
const htmlText = await htmlBlob.text();
// 插入到容器或解析 DOM 提取 src
}
if (item.types.some(t => t.startsWith('image/'))) {
const imageBlob = await item.getType(item.types.find(t => t.startsWith('image/')));
const imgUrl = URL.createObjectURL(imageBlob);
}
}
安全与兼容性陷阱：Safari 不支持 read() 读取图片类型，Firefox 完全不支持
目前只有 Chrome/Edge 稳定支持完整 read()（含图片），Safari 17.4+ 仅支持 text/plain 和 text/html，尝试读 image/* 会抛出 NotAllowedError；Firefox 仍停留在 readText() 阶段，read() 直接 undefined。因此不能把图片读取当作必选项。
- 务必用
try/catch包裹每个item.getType()调用 - 优先解析
text/html，从中用正则或 DOMParser 提取data:图片，比依赖独立图片项更可靠 - 避免在非 Chromium 浏览器中报错中断流程——检测
navigator.clipboard?.read是否存在再执行
真正难的不是代码怎么写，而是得接受：所谓“富文本剪贴板”在各平台实现差异极大，HTML 可能被净化、图片可能被丢弃、样式可能被剥离——你拿到的永远只是当前浏览器愿意给的那一小块碎片。
