如何使用EmailJS发送webp格式的base64编码截图？

按下面步骤操作即可，不需要额外依赖第三方存储或者转码服务：

• 前置准备
  先确认两点：一是你用的是@emailjs/browser v3及以上版本，旧的emailjs-com包对base64附件的支持有已知bug；二是你绑定的EmailJS发件服务没有关闭附件权限，主流邮箱（Gmail、Outlook、国内主流个人邮箱）默认都是开启的，不需要额外改配置。

• 第一步：生成合规的WebP格式Base64截图
  不管你是用html2canvas、dom-to-image还是其他截图库，最终拿到的base64字符串只要是标准WebP编码即可，带不带data:image/webp;base64,前缀都可以，EmailJS会自动识别，注意不要让字符串里混入多余的换行、空格，否则生成的附件会损坏。
  以html2canvas为例，生成WebP截图的代码参考：

// 对指定DOM节点截WebP格式图
const getWebpScreenshot = async () => {
  const targetDom = document.querySelector("#need-capture-area");
  const canvas = await html2canvas(targetDom, { useCORS: true });
  // 第二个参数是图片质量，取值0-1，越大越清晰体积也越大
  return canvas.toDataURL("image/webp", 0.8);
};

• 第二步：组装发送参数，调用发送接口
  核心是不要把base64字符串放到普通模板变量里传，必须放到attachments数组字段里，每个附件需要指定三个属性：文件名（后缀必须是.webp）、base64数据、编码类型固定填base64。
  发送代码参考：

import emailjs from '@emailjs/browser';

const sendMailWithScreenshot = async () => {
  const screenshotBase64 = await getWebpScreenshot();
  const sendParams = {
    // 下面这些普通变量和你在EmailJS模板里配置的变量名对应就行
    to_email: "receiver@example.com",
    mail_title: "页面截图反馈",
    mail_content: "附件为用户提交的页面截图",
    // 附件配置是核心，不要写错字段名
    attachments: [
      {
        name: "page-screenshot.webp",
        data: screenshotBase64,
        encoding: "base64"
      }
    ]
  };

  try {
    const result = await emailjs.send(
      "你的EmailJS Service ID",
      "你的EmailJS Template ID",
      sendParams,
      "你的EmailJS Public Key"
    );
    console.log("邮件发送成功", result);
  } catch (error) {
    console.error("发送失败", error);
  }
};

• 常见问题排查
  • 收到的附件打不开：先检查截图生成逻辑，如果截图区域有跨域资源，需要给对应资源配CORS，同时html2canvas开启useCORS: true，否则canvas会被污染，导出的base64本身就是损坏的；另外检查base64字符串有没有被业务逻辑截断。
  • 提示发送失败/大小超限：EmailJS免费版单封邮件总大小限制是5MB，WebP压缩率已经远高于PNG/JPG，如果还是超限，可以调低toDataURL的质量参数，或者缩小截图的分辨率。
  • 收件方看不到附件：部分企业邮箱会默认拦截第三方客户端发送的带附件邮件，可以换个人邮箱测试定位问题。

内容的提问来源于stack exchange，提问作者Rylan Schaeffer