React JS中多类型数据（图片+文本）复制到剪贴板兼容问题

问题根源 #

Chrome（含部分Chromium内核浏览器）的Clipboard API暂未实现对多类型ClipboardItem的支持，无法同时复制图片Blob和文本；而Safari已支持该特性，这就是你遇到报错的核心原因。

兼容方案思路 #

分两种场景处理：

1. 支持多类型ClipboardItem的浏览器（如Safari）：直接通过navigator.clipboard.write同时写入图片和文本。
2. 不支持的浏览器（如Chrome）：将文本绘制到图片上，生成包含文本的PNG Blob，再复制这个单一的图片Blob——既保留PNG格式，无需外部URL，也能满足短信分享的需求。

代码实现（React） #

1. 工具函数：Base64转Blob

const base64ToBlob = (base64) => {
  const byteString = atob(base64.split(',')[1]);
  const mimeString = base64.split(',')[0].split(':')[1].split(';')[0];
  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeString });
};

2. 工具函数：将文本绘制到图片上

const drawTextOnImage = async (imageBlob, text) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      // 预留文本显示区域，可根据需求调整高度
      canvas.width = img.width;
      canvas.height = img.height + 40;
      const ctx = canvas.getContext('2d');

      // 绘制原始图片
      ctx.drawImage(img, 0, 0);

      // 设置文本样式，可自定义字体、颜色、位置
      ctx.fillStyle = '#333';
      ctx.font = '18px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText(text, canvas.width / 2, img.height + 28);

      // 转换为PNG Blob
      canvas.toBlob((blob) => {
        blob ? resolve(blob) : reject(new Error('Failed to generate combined image blob'));
      }, 'image/png');
    };
    img.onerror = reject;
    img.src = URL.createObjectURL(imageBlob);
  });
};

3. 核心复制函数

const copyImageAndText = async (base64Image, shareText) => {
  try {
    const imageBlob = base64ToBlob(base64Image);

    // 检测浏览器是否支持同时复制多类型ClipboardItem
    const supportsMultiItem = typeof ClipboardItem !== 'undefined' && await (async () => {
      try {
        // 尝试创建包含图片和文本的ClipboardItem，验证兼容性
        new ClipboardItem({
          'text/plain': new Blob(['test'], { type: 'text/plain' }),
          'image/png': imageBlob
        });
        return true;
      } catch (e) {
        return false;
      }
    })();

    if (supportsMultiItem) {
      // 支持多类型：直接复制图片+文本
      const clipboardItems = [
        new ClipboardItem({
          'image/png': imageBlob,
          'text/plain': new Blob([shareText], { type: 'text/plain' })
        })
      ];
      await navigator.clipboard.write(clipboardItems);
      alert('图片和文本已复制到剪贴板');
    } else {
      // 不支持多类型：复制带文本的合并图片
      const combinedBlob = await drawTextOnImage(imageBlob, shareText);
      await navigator.clipboard.write([
        new ClipboardItem({ 'image/png': combinedBlob })
      ]);
      alert('带文本的图片已复制到剪贴板');
    }
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制失败，请确保操作在点击事件中触发，并检查浏览器权限');
  }
};

4. React组件中使用

const ShareButton = () => {
  // 替换为你的Base64图片和分享文本
  const targetBase64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
  const shareText = '这是我要分享的内容';

  return (
    <button onClick={() => copyImageAndText(targetBase64Image, shareText)}>
      复制到剪贴板
    </button>
  );
};

export default ShareButton;

注意事项 #

• 剪贴板操作必须在用户交互事件（如点击、触摸）中触发，否则浏览器会因安全策略阻止操作。
• 文本绘制样式可根据需求调整，比如字体大小、颜色、位置等，适配不同图片尺寸。
• 若必须分开复制图片和文本，可先复制图片再用document.execCommand('copy')复制文本，但这种方式会覆盖剪贴板内容，用户需要分两次粘贴，体验较差，不推荐用于短信分享场景。

内容的提问来源于stack exchange，提问作者Benjamin Falkner