H5剪贴板API用于图像和丰富的文本操纵

H5的Clipboard API可通过ClipboardItem和navigator.clipboard实现图片及富文本复制，但需注意兼容性和安全策略。1. 图片复制需通过fetch获取图片转blob并创建ClipboardItem，使用navigator.clipboard.write写入剪贴板，但需HTTPS环境、用户手势触发，并测试不同平台格式支持情况。2. 富文本复制推荐使用navigator.clipboard.writeText，也可构造包含text/plain和text/html类型的ClipboardItem以保留样式。3. 所有复制操作必须由用户交互触发，并处理权限异常，必要时降级使用execCommand。

H5 的 Clipboard API 确实让前端操作剪贴板的能力更强了，尤其是在处理图片和富文本时。不过它也有一些限制和使用上的注意事项。下面我从实际应用场景出发，说说怎么用这个 API 来实现一些常见的功能。

图片复制到剪贴板：支持但有条件

在移动端浏览器中，想要把一张图片复制到剪贴板，可以通过 ClipboardItem 和 ImageBitmap 实现，但不是所有浏览器都支持，尤其是一些老版本或者国产壳浏览器。

基本流程如下：

• 通过 fetch 获取图片资源
• 转换成 blob
• 创建 ClipboardItem
• 使用 navigator.clipboard.write() 写入剪贴板

示例代码片段：

async function copyImageToClipboard(url) {
  const response = await fetch(url);
  const blob = await response.blob();
  const item = new ClipboardItem({ [blob.type]: blob });
  await navigator.clipboard.write([item]);
}

需要注意的点：

• 必须是 HTTPS 环境下才能调用
• 部分浏览器需要用户手势触发（比如点击事件）
• 不同平台对图片格式的支持不同，最好测试一下 WebP 和 JPEG

富文本复制更灵活，兼容性也更好

相比图片，富文本复制要稳定得多。你可以用 navigator.clipboard.writeText() 来复制纯文本，也可以结合 execCommand('copy') 在旧环境下做兼容处理。

现代推荐写法：

navigator.clipboard.writeText('<p>这是富文本内容</p>')
  .then(() => alert('复制成功'))
  .catch(err => console.error('复制失败', err));

如果你希望复制带样式的 HTML 内容，在某些编辑器场景下可能还需要手动构造粘贴板数据结构，比如添加 text/html 类型的内容。

一个稍微复杂一点的例子：

const html = '<strong>加粗文字</strong>';
const text = '加粗文字';

const clipboardItem = new ClipboardItem({
  'text/plain': new Blob([text], { type: 'text/plain' }),
  'text/html': new Blob([html], { type: 'text/html' })
});

await navigator.clipboard.write([clipboardItem]);

这样做的好处是，当你在支持富文本粘贴的地方（比如 Word 或富文本编辑器）粘贴时，能保留样式。

用户交互触发很重要，别忘了权限问题

无论你是复制图片还是富文本，必须由用户主动行为触发，比如点击按钮、长按等。否则浏览器会抛出错误，防止滥用。

另外，有些浏览器会弹出权限请求，你需要处理好异常情况：

try {
  await navigator.clipboard.writeText('内容');
} catch (err) {
  console.error('无法访问剪贴板', err);
}

如果遇到不支持的环境，可以考虑降级到 document.execCommand('copy')，虽然这个方法已经被废弃，但在部分旧项目中仍然有用。

基本上就这些。H5 的 Clipboard API 功能很实用，但在实际开发中要注意兼容性和安全策略，不能指望所有设备都能完美支持。

以上是H5剪贴板API用于图像和丰富的文本操纵的详细内容。更多信息请关注PHP中文网其他相关文章！