Send dynamically created PNG from ajax to PHPmailer attachment?

so basically I've tried everything I could here.

I'm adding a new feature on my website that consist in creating a PNG image (html2canvas) that allows users to download the image (which works fine) and/or sending it to "a friend" or "yourself" once the image was created...

The thing is I haven't been able to make PHPmailer catch the image and send it to the given email address, it just send the e-mail with an attachment but that attachment comes empty.

Here's my last code:

HTML:

<form id="form_id" method="post" enctype="multipart/form-data">
   <input id="form_image_data" type="hidden" name="image" value="">
   <button id="send">Send</button>
</form>

JS (this is what happens when clicking the 'send' button):

var canvas = document.querySelector('canvas').toDataURL();
var image = document.getElementById('form_image');
image.setAttribute('name', 'image');
var formData = new FormData($('#form_id')[0]);

        $.ajax({
            dataType: 'JSON',
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            url: 'the_url_to_phpmailer',
            success: function(data) {
                alert(data.confirm);
            }
        });

PHP:

$email = $_POST['email'];
$image = $_POST['image'];
$content = '.....';


$mail->setFrom('[email protected]', 'Website Name');
$mail->addAddress($email); 
$mail->isHTML(true);

$mail->addStringAttachment($image, 'image.png');
$mail->Subject = 'Image from website.';
$mail->Body    = $content;
$mail->AltBody = $content;

$mail->send();

Thanks a lot! Everything is appreciated big time!

Solution

I finally figured it out! I did a ton of research and saw one post from stackoverflow and implemented it..

Here's the way to send dynamically (or not dyamically) images or canvas from JS to PHPmailer.

HTML:

<form id="form_id" method="post" enctype="multipart/form-data">
   <canvas id="canvas"> <!--image--> </canvas>
   <input id="hidden_input" type="hidden" name="image" value="">
   <button id="send">Send</button>
</form>

JS:

var send_this = document.getElementById('canvas').toDataURL("image/png");
document.querySelector('#hidden_input').value=send_this;

var formData = new FormData($('#form_id')[0]);
$.ajax({
            dataType: 'JSON',
            data: formData,
            type: 'POST',
            cache: false,
            contentType: false,
            processData: false,
            url: 'the_url_to_phpmailer',
            success: function(data) {
                alert(data.confirm);
            }
        });

PHP:

 <?php

    $email = $_POST['email'];
    $image = $_POST['image'];

    $data = substr($image, strpos($image, ",")); /*This is important in order to make it work,
 the dataURL comming from JS comes with an extra string at the begining that does not belong to a base64 string, 
so we remove it and base64_decode after.*/

    $filename="image.png"; 
    $encoding = "base64"; 
    $type = "image/png";

    $email = $_POST['email'];
    $image = $_POST['image'];
    $content = '.....';

    $mail->setFrom('[email protected]', 'My Website Name');
    $mail->addAddress($email); 
    $mail->isHTML(true);

    $mail->AddStringAttachment(base64_decode($data), $filename, $encoding, $type);
    $mail->Subject = 'Image from website.';
    $mail->Body    = $content;
    $mail->AltBody = $content;

    $mail->send();

    ?>

Hope this helps someone on the future, it does work perfect. The recipient receives the attached png image.