剪贴板是计算机系统中的一个核心服务，它像一块临时白板，用于在不同应用间中转数据。当你使用 Ctrl+C 复制文本或图片时，所选内容便被存储在这块白板上。但它的默认工作模式是单次覆盖：复制一段文字，再复制一张图片，白板上就只剩下图片。
这个设计最大的痛点在于内容不可见。你只有在 Ctrl+V 粘贴时，才能验证之前复制了什么，这常导致操作失误或信息错漏。
基于此，市面上出现了许多第三方工具来「可视化」剪贴板，例如桌面软件或在线网页。
有些在线网页工具 智能剪贴板，你使用 Ctrl + C 复制后，网页里会可视化显示刚才复制的文本后图片。
智能剪贴板的核心能力是实时监听系统剪贴板变化，当你在电脑上（不仅是浏览器内）复制任意内容时，网页都能即时感知并触发回调，读取剪贴板内容并进行可视化渲染。
navigator.clipboard.addEventListener('clipboardchange', () => {
console.log('剪贴板内容已更新');
// 在此处读取剪贴板中最新内容，并进行可视化渲染
});
Clipboard API 提供了两种主要的读取方法，分别对应不同的数据类型：
• readText() - 专门读取文本内容
• read() - 读取所有类型的数据，包括图片、文件等
读取文本内容是最简单的操作：
// 获取剪贴板中的文本
const text = await navigator.clipboard.readText();
console.log(text); // 输出："我是剪贴板里的文本内容"
读取图片或文件则相对复杂一些，需要遍历 ClipboardItem：
async function readClipboard() {
try {
// 获取剪贴板中的所有条目
const items = await navigator.clipboard.read();
for (const item of items) {
// 检查条目支持的类型
for (const type of item.types) {
// 获取对应的 Blob 数据
const blob = await item.getType(type);
console.log(`类型: ${type}, 大小: ${blob.size} 字节`);
if (['image/png', 'image/jpeg'].includes(type)) {
// 处理图片：创建可访问的临时 URL
const imageUrl = URL.createObjectURL(blob);
// 可将此 URL 赋值给 <img /> 的 src 属性以显示
} else {
// 处理其他类型文件
}
}
}
} catch (err) {
console.error('❌ 读取失败:', err);
}
}
与读取对应，写入操作也有两种主要方法：
• writeText() - 写入文本
• write() - 写入任意数据（如图片）
写入文本是网页中最常见的场景，例如「一键复制」功能：
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('✅ 文本已复制到剪贴板');
} catch (err) {
console.error('❌ 复制失败:', err);
}
}
// 使用示例
copyText('这是一段将被复制的文本');
写入图片则更为强大，典型场景是将网页中的 DOM 元素（如一个图表或一段富文本）截图后直接存入剪贴板：
import html2canvas from 'html2canvas';
async function copyElementToClipboard(element) {
// 1. 将 DOM 元素渲染为 Canvas
const canvas = await html2canvas(element);
// 2. Canvas 转换为 PNG 格式的 Blob
const blob = await new Promise(resolve =>
canvas.toBlob(resolve, 'image/png')
);
// 3. 创建 ClipboardItem 并写入剪贴板
const item = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([item]);
console.log('✅ 元素截图已保存至剪贴板');
}
↶ 返回首页 ↶