如何在React应用中通过WhatsApp分享Base64格式二维码图片

你可以通过将Data URL转换为Blob并使用Web Share API实现无本地存储的WhatsApp图片分享，同时兼容不支持Web Share的环境。以下是简洁的实现代码：

1. 完整的handleShare实现（含Data URL转Blob工具函数） #

// 工具函数：将Data URL转换为Blob
const dataURLtoBlob = (dataURL) => {
  // 拆分Data URL的前缀和base64内容
  const [metaPart, base64Part] = dataURL.split(';base64,');
  const contentType = metaPart.split(':')[1];
  // 解码base64字符串
  const raw = window.atob(base64Part);
  const uint8Array = new Uint8Array(raw.length);
  
  for (let i = 0; i < raw.length; i++) {
    uint8Array[i] = raw.charCodeAt(i);
  }
  
  return new Blob([uint8Array], { type: contentType });
};

const handleShare = async (e) => {
  e.preventDefault();
  if (!qr) return; // 确保二维码已生成

  try {
    const blob = dataURLtoBlob(qr);
    // 创建临时Blob URL（会话内有效，无需本地存储）
    const blobUrl = URL.createObjectURL(blob);

    // 优先使用Web Share API（支持直接分享文件到WhatsApp）
    if (navigator.share) {
      await navigator.share({
        title: '分享二维码',
        files: [
          new File([blob], `${state.name}.png`, { type: 'image/png' })
        ]
      });
    } else {
      // 兼容不支持Web Share的环境：构造WhatsApp文本分享链接（含图片临时URL）
      const encodedLink = encodeURIComponent(blobUrl);
      window.open(`https://api.whatsapp.com/send?text=请查看二维码：${encodedLink}`);
    }

    // 分享完成后释放临时Blob URL，避免内存泄漏
    URL.revokeObjectURL(blobUrl);
  } catch (error) {
    console.error('分享失败:', error);
  }
};

2. 关键说明 #

• 解决atob()报错问题：之前的错误是因为直接对完整Data URL（包含data:image/png;base64,前缀）调用atob()，必须拆分前缀后只解码base64部分。
• Web Share API优势：支持的浏览器/移动端可以直接唤起系统分享界面，将图片文件直接发送到WhatsApp，无需上传到服务器或本地存储。
• 兼容方案：对于不支持Web Share的环境，通过构造WhatsApp分享链接，将临时Blob URL作为文本发送，用户点击链接即可查看二维码（注意：Blob URL仅在当前页面会话有效，跨设备访问需要部署到公网HTTPS环境）。

3. 注意事项 #

• Web Share API需要HTTPS环境（本地开发的localhost例外）。
• 临时Blob URL会在页面关闭后自动失效，无需手动清理（但主动调用URL.revokeObjectURL更规范）。
• 如果需要跨设备长期可访问的分享链接，你可能需要临时上传图片到云存储，但这违反了你“避免存储”的需求，因此上述方案是最优解。

内容的提问来源于stack exchange，提问作者Prajwal Abraham