浏览器原生剪贴板：原来它能这样读取用户截图！

JavaScript , , , ,

当我们使用 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 ，你会看到浏览器弹出权限请求。授权后，图片就会立刻显示在下方！