Send image created from HTML element, using nodemailer

Question

I am trying to send an image, using nodemailer. What I am trying to do however is send an image that is created from an html page, that is generated by the user.

I am able to generate an image of the page, and insert it in to the page at the bottom, and I am able to send emails, but I cannot seem to send the image via email.

This is the script to create the image, and then send it to the node endpoing:

 <script type="text/javascript" src="html2canvas/dist/html2canvas.js"></script>
                            <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
 <script type="text/javascript">
     var doc = new jsPDF();
     $(document).ready(function() {
         $('#Submit').click(function(){
             var doc = new jsPDF();
             console.log("HERE");
             html2canvas(document.querySelector("#Submit")).then(canvas => {
             doc.addImage(canvas, 'JPEG', 10, 10, 160, 200, 'alias', 'NONE', 0);
             var dataURL = canvas.toDataURL();
             $.ajax({
                type: 'POST',
                 url: 'http://192.168.1.23:8080/sendMail',
                 data: {"image": dataURL}
              });
           });
        });
     });
 </script>
 <button id="Submit" class="btn-secondary btn-sm back_to_options">Submit</button>

and this is the nodescript handling the sending of the email.

let bodyParser = require('body-parser');
let multer = require('multer');
let cors = require('cors');
let url  = require('url');
let express = require('express');
let app = express();
let nodemailer = require('nodemailer');
let fs = require('fs');

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
//app.use(multer());

/**
 *
 * Function to hopefully send an email :)
 */

app.post("/sendMail", function (req, res) {
   // console.log(req.body.doc);
   // console.log("\n");
   // console.log(req.body.image);
    var base64Data = req.body.image.replace(/^data:image\/png;base64,/, "");
   // console.log(base64Data);
    fs.writeFile("out.png", base64Data, 'base64', function(err) {
        if(err) {
            console.log(err);
        }
    });

    let transporter = nodemailer.createTransport({
        service: 'gmail',
        auth: {
            user: 'user@gmail.com',
            pass: 'pass!'
        }
    });

    let mailOptions = {
        from: 'user@gmail.com',
        to:   'client@gmail.com',
        subject: 'Test',
        text:    'It works!',
        attachments: [
            {
                path: req.body.image
            },
            {
                filename: 'out.png',
                path: 'out.png'
            }
        ]
    };

    transporter.sendMail(mailOptions, function(error, info) {
        if (error) {
            console.log(error);
        } else {
            console.log('Email sent: ' + info.response);
        }
    });

});
app.listen(8080);

Buut, in the email, both images are blank.

Does anyone have any ideas as to why this would be happening?