如何通过电子邮件发送屏幕截图？答案

【问题标题】：How to send a screenshot by email?如何通过电子邮件发送屏幕截图？
【发布时间】：2020-05-19 23:58:20
【问题描述】：

我有一些捕获容器的代码。为了捕捉我正在使用'html2canvas'。我想要做的是通过电子邮件发送这个捕获。对于电子邮件，我使用的是“smtpjs”。如何通过电子邮件发送捕获？这可以在不保存捕获的情况下完成吗？

这是我的代码：

<html>
<head>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <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_screenshot' value='Send' onclick='email();'><br/>

<!-- Script -->
<script>
    function screenshot() {
        html2canvas(document.querySelector("#test2")).then(canvas => {
            document.body.appendChild(canvas)
        });
    }

    function email() {
        Email.send({
            SecureToken: "0968b-d55-45-b4a8-5d6370",
            To: 'test@gmail.com',
            From: "test@gmail.com",
            Subject: "This is the subject",
            Body: "iuwaehfiuwreu"
        }).then(
            message => alert(message)
        );
    }
</script>
</body>
</html>

【问题讨论】：

aside: 你有两个<input type='button'，它们都使用相同的id，but_screenshot——这是非法的，看起来像是一个错字因为一个按钮是屏幕截图，另一个是发送电子邮件。

标签： javascript html html2canvas

【解决方案1】：

来自https://smtpjs.com/页面

开发提示：如果您想发送 base64 格式的附件，请改为将“路径”作为属性传递，在 dataUri 中发送“数据”属性格式。以 dataUri 格式。（示例即将推出！）

例子：

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body",
    Attachments : [
    {
        name : "smtpjs.png",
        data : canvas.toDataURL()
    }]
}).then(
  message => alert(message)
);

【讨论】：

【解决方案2】：

smtpjs 提供了一种在附件中发送base64 数据的方法。因此，您可以简单地从html2canvas 获取屏幕截图，以base64 字节为单位，然后在Attachments 的data 属性中发送数据，如下所示：

Email.send({
    SecureToken : "C973D7AD-F097-4B95-91F4-40ABC5567812",
    To : 'them@website.com',
    From : "you@isp.com",
    Subject : "This is the subject",
    Body : "And this is the body",
    Attachments : [
    {
        name : "smtpjs.png",
        path : "data:image/png;base64,iVBORw0KGgoAAAANSUhEgDz3/Km+vQGsoVNxX="
    }]
}).then(
  message => alert(message)
);

来自smtpjs docs：

开发提示：如果您想发送 base64 格式的附件，而不是将“路径”作为属性传递，而是发送 dataUri 格式的“数据”属性。 dataUri 格式。

【讨论】：