Search code examples
javascripthtmlhtml2canvas

How to send a screenshot by email?


I have some code that takes a capture of a container. To capture I am using 'html2canvas'. What I am trying to do is send this capture by email. For email I am using 'smtpjs'. How could I send the capture by email? Can this be done without having to save the capture?

This is my code:

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

Solution

  • From the page 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!)

    Example:

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