当我们使用 GitHub 时，会发现 Ctrl+V 就能直接读取用户剪贴板图片进行粘贴，那么它是如何工作的？安全性如何？

新一代神器：navigator.clipboard

navigator.clipboard API 是一个异步的、基于 Promise 的现代接口，其具有三大核心优势：

1. 所有读写操作都返回 Promise，不会阻塞页面
2. 操作剪贴板需要获得用户授权，既安全又透明
3. 除了文本，它能轻松读写图片等二进制数据

写入剪贴板

在深入读取操作前，我们先看看如何向剪贴板写入内容。

写入文本

这是最常见的操作，比如实现一个“点击复制”按钮。

const copyBtn = document.getElementById('copy-btn');

copyBtn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('你好，世界！');
    console.log('文本已成功复制到剪贴板');
  } catch (err) {
    console.error('复制失败: ', err);
  }
});

写入图片

写入图片稍微复杂一点，需要使用 clipboard.write() 方法，并传入一个 ClipboardItem 对象。这个对象可以包含不同 MIME 类型的数据。

读取剪贴板

当用户在我们的网页上执行粘贴操作时，我们如何读取剪贴板里的内容，特别是图片？

关键：获取用户授权

这是最重要的一步。当我们尝试读取剪贴板时，浏览器会主动弹出提示框，请求用户授权。

只有用户点击“允许”，我们的代码才能继续执行。这彻底杜绝了恶意网站在后台偷偷读取用户剪贴板内容的可能。

读取步骤详解

让我们来实现一个监听粘贴事件并处理图片的功能。

1. 监听 paste 事件
2. 调用 navigator.clipboard.read()：该方法会返回 Promise，解析为一个 ClipboardItem 对象的数组
3. 检查每个 ClipboardItem MIME 类型
4. 获取数据 Blob：如果 MIME 中包含我们想要的图片类型（如 "image/png"），我们就可以调用 item.getType() 方法解析为该数据的 Blob 对象
5. 拿到 Blob 对象后，最常见的做法是使用 URL.createObjectURL() 生成一个临时 URL，并将其显示在 <img> 标签中，或直接上传到服务器

完整代码示例

假设我们有这样一个 HTML 结构：

<div id="paste-area" contenteditable="true">
  <p>请在这里粘贴你的截图...</p>
</div>
<img id="preview-image" src="" alt="图片预览" style="max-width: 100%; margin-top: 20px;">

对应的 JavaScript 代码如下：

const pasteArea = document.getElementById('paste-area');
const previewImage = document.getElementById('preview-image');

pasteArea.addEventListener('paste', async (e) => {
 // 阻止默认的粘贴行为
  e.preventDefault(); 
 try {
    // 请求读取剪贴板的权限
    const permission = await navigator.permissions.query({ name: 'clipboard-read' });
    if (permission.state === 'denied') {
      throw new Error('剪贴板读取权限被拒绝');
    }

    // 读取剪贴板内容
    const clipboardItems = await navigator.clipboard.read();
    for (const item of clipboardItems) {
      // 检查是否有图片类型
      const imageType = item.types.find(type => type.startsWith('image/'));
      if (imageType) {
        // 获取图片 blob 数据
        const blob = await item.getType(imageType);
        // 创建一个临时的 URL 来预览图片
        const imageUrl = URL.createObjectURL(blob);
        previewImage.src = imageUrl;
        // 在这里，你可以将 blob 上传到服务器
        // uploadToServer(blob); 
        console.log('图片粘贴成功！');
        return; // 处理完图片后即可退出
      }
    }

    // 如果没有图片，可以尝试读取文本
    const text = await navigator.clipboard.readText();
    console.log('粘贴的文本内容:', text);
    pasteArea.innerText = text;

  } catch (err) {
    console.error('粘贴失败: ', err);
    // 如果没有图片，尝试用传统方式读取文本
    const text = e.clipboardData.getData('text/plain');
    if (text) {
        pasteArea.innerText = text;
    }
  }
});

function uploadToServer(blob) {
 const formData = new FormData();
  formData.append('image', blob, 'screenshot.png');

 // fetch('/api/upload', {
 //   method: 'POST',
 //   body: formData
 // }).then(...);
 console.log('正在模拟上传...', formData.get('image'));
}

现在，截取一张图到剪贴板，然后在这个区域按下 Ctrl+V，你会看到浏览器弹出权限请求。授权后，图片就会立刻显示在下方！