搜索
  • 问个关于在浏览器里面实现复制功能的问题
  • 发布于 1天前
  • 14 热度
    6 评论
我想在浏览器里面实现复制功能，发现 navigator.clipboard.write 无法写入多张图片，问 ai 也说不能，现在有个疑问,从 qq 这种软件复制多张图片，触发粘贴发现是一个 DataTransferItemList 类数组对象，那么既然可以粘贴，应该是可以写入的啊，求大佬解惑?
用户评论
  • 远行客
  • 之前写过一个读取剪贴板的东西： https://codepen.io/zsh2517/full/ZEdEdzw
    复制一段消息，然后在这里读取剪贴板，看一下真实的剪贴板数据。然后试着构造一个相同的结构塞进去，看看 QQ 能不能用。不过因为浏览器的局限性，它只能读取一些通用的格式。如果想要完整的剪贴板数据，可以 AI 用 win/mac 原生 API 写个工具。有些软件除了公共格式比如 text/html/image 等还会写入自己应用专有格式，以实现例如表情、at 人、回复等功能。设置剪贴板可以参考这个有点意思的 demo （往剪贴板写入 text/html 不对应的内容，实现纯文本输入框粘贴/富文本输入框粘贴，内容不同的效果）： https://codepen.io/zsh2517/full/WNqNBad
  • 2025/6/18 12:32:00 [ 0 ] [ 0 ] 回复
  • 徒步旅行
  • 星空寂云  2025-06-18 12:27
    QQ 应该是全程当 HTML 处理吧？这样本质上就是一个 ClipboardItem 。
    https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write ，这里提示部分系统是不支持多个 ClipboardItem 。

    QQ 本身的消息框是图文混排的，所以写入的时候会是一个 HTML 写入进去，然后粘贴的时候再来解析。这和很多在线文档的实现方式是一致的，而不需要真的写入多个 minetype 为 text/image 的 ClipboardItem 到 Clipboard 里。

  • 2025/6/18 12:29:00 [ 0 ] [ 0 ] 回复
  • 星空寂云
  • QQ 应该是全程当 HTML 处理吧？这样本质上就是一个 ClipboardItem 。
    https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write ，这里提示部分系统是不支持多个 ClipboardItem 。
  • 2025/6/18 12:27:00 [ 0 ] [ 0 ] 回复
  • 人生如流水
  • 一览众山小  2025-06-18 12:18
    我看 mdn navigator.clipboard.write 接收参数是一个 ClipboardItem[]，我尝试了一下，chrome 目前并不支持多个 ClipboardItem. 所以可能 QQ 是 app, 他支持多写入，浏览器是受限环境，仅支持多读，不支持多写？

    可能是这样，只能写入第一个 ClipboardItem

  • 2025/6/18 12:20:00 [ 0 ] [ 0 ] 回复
  • 一览众山小
  • 我看 mdn navigator.clipboard.write 接收参数是一个 ClipboardItem[]，我尝试了一下，chrome 目前并不支持多个 ClipboardItem. 所以可能 QQ 是 app, 他支持多写入，浏览器是受限环境，仅支持多读，不支持多写？
  • 2025/6/18 12:18:00 [ 0 ] [ 0 ] 回复
  • 风尘客
  • 这个问题和浏览器、操作系统设计有关。事实上，现在的 write 方法中，虽然支持一个数组，但是大部分实现都只会处理第一个 ClipboardItem 。如过你去翻标准定义，会发现有这么一句：
    If data’s size is greater than 1, and the current operating system does not support multiple native clipboard items on the system clipboard, then add data[0] to dataList, else, set dataList to data.
  • 2025/6/18 12:08:00 [ 0 ] [ 0 ] 回复
可能感兴趣的话题