如何用html2canvas截图后通过SMTP.js发送邮件（无需保存截图）

当然可以不用保存截图直接发送！核心思路是把html2canvas生成的Canvas转换成Base64格式的Data URL，然后直接嵌入邮件正文或者作为附件发送，完全不需要本地保存文件。下面是针对你现有代码的修改方案：

关键修改点 #

• 新增全局变量存储截图的Base64数据，让截图和发送操作共享数据
• 修复按钮ID重复的问题（原代码两个按钮ID一致，会导致DOM选择异常）
• 将Canvas转换为Base64字符串，支持嵌入邮件正文或作为附件

完整修改代码 #

<html>
<head>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
  <div class="source-container" id="test2" style="background-color:red;width:300px;height:300px;float:left;"></div>
  <br/>
  <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'>
  <br/>
  <input type='button' id='but_send' value='Send' onclick='email();'>
  <br/>

  <script>
    // 全局变量存储截图的Base64数据
    let screenshotBase64 = null;

    function screenshot() {
      html2canvas(document.querySelector("#test2")).then(canvas => {
        // 把Canvas转换为PNG格式的Base64字符串
        screenshotBase64 = canvas.toDataURL("image/png");
        // 可选：在页面显示截图（不需要的话可以移除这行）
        document.body.appendChild(canvas);
        alert("截图已准备好，点击发送按钮即可发送邮件！");
      });
    }

    function email() {
      if (!screenshotBase64) {
        alert("请先截取屏幕截图！");
        return;
      }

      Email.send({
        SecureToken: "0968b-d55-45-b4a8-5d6370", // 请替换为你的有效SecureToken
        To: 'test@gmail.com',
        From: "test@gmail.com",
        Subject: "包含截图的邮件",
        // 方案1：将截图嵌入邮件正文（HTML格式）
        Body: `<p>以下是截取的屏幕截图：</p><img src="${screenshotBase64}" alt="屏幕截图" style="max-width: 100%;"/>`,
        // 方案2：将截图作为附件发送（需要的话注释上面的Body，启用这段）
        // Body: "邮件正文内容，截图已作为附件发送",
        // Attachments: [
        //   {
        //     name: "screenshot.png",
        //     content: screenshotBase64.split("base64,")[1], // 移除Data URL前缀，仅保留Base64编码内容
        //     contentType: "image/png",
        //     encoding: "base64"
        //   }
        // ]
      }).then(message => {
        alert(message === "OK" ? "邮件发送成功！" : `发送失败：${message}`);
      });
    }
  </script>
</body>
</html>

代码说明 #

1. 全局变量screenshotBase64：用于暂存截图的Base64数据，让email()函数能直接获取到截图内容
2. Canvas转Base64：通过canvas.toDataURL("image/png")将Canvas对象直接转换为Base64格式的图片数据，全程在浏览器内存中完成，无需本地保存文件
3. 邮件正文嵌入图片：在Body中使用HTML格式，通过<img>标签的src属性直接引用Base64数据，收件人打开邮件即可直接看到图片
4. 附件发送（可选）：如果需要把截图作为附件，启用Attachments参数即可，注意要去掉Base64字符串的前缀（data:image/png;base64,），只保留后面的编码内容

注意事项 #

• 确保你的SecureToken是有效的，SMTP.js需要正确的Token才能正常发送邮件
• 部分邮件客户端会限制Base64图片的大小，若截图尺寸较大，建议使用附件方式发送
• 原代码重复引入了html2canvas.js和html2canvas.min.js，保留其中一个即可（推荐体积更小的min版）

内容的提问来源于stack exchange，提问作者Saul JP