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

Question

我有一些代码可以捕获容器。为了捕获，我使用 '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>

Answer 1

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

Dev Tip: If you want to send an attachment in base64 format, instead of passing "path" as a property, send a "data" property in dataUri format. in dataUri format. (Example coming soon!)

示例：

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)
);

Answer 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 文档：

Dev Tip: If you want to send an attachment in base64 format, instead of passing "path" as a property, send a "data" property in dataUri format. in dataUri format.

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

How to send a screenshot by email?

html

javascript

html2canvas