Как передать на почту картинку из Canvas

[DJ PROMO]

Доброго дня.
Никогда ранее не сталкивался с подобной задачей, а сегодня пришлось.
Ни как не могу передать изображение на почту из конструктора на Canvas.
Сам код JS где идет формирование для формы:

$('#jsonCanvas').on('click', function () {
        $('#popup').css('display', 'block');
    });

    $('#popup .close').on('click', closePopup);

    function closePopup() {
        $('#popup').css('display', 'none');
        $('#popup .error').html('');
        $('#email').css('border', '1px solid #333');
        $('#email').val('');
    }

    $('#popup .button').on('click', sendImg);
   
    function sendImg() {
        var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var imgJson = canvas.toDataURL("image/png").replace("data:image/png;base64,", '');
        var email = $('#email').val();
        var imy = $('#imy').val();
        var telefon = $('#telefon').val();
        var urlref = $('#urlref').val();


        if(email != ''){
            if(email.search(pattern) == 0){
                $.ajax({
                    type: "post",
                    url: "smartlid/save_image.php",
                    data: { img : imgJson, email : email, imy : imy, telefon : telefon, urlref : urlref },
                    success: function (data) {
                        console.log(data);
                    }
                });
                closePopup();
                alert('Эскиз отправлен на почту');
               
            }else{
                $('#popup .error').html('Введите корректный Email');
            }
        }else{
            $('#popup .error').html('Поле e-mail не должно быть пустым!');
            $('#email').css('border', '1px solid rgb(230, 87, 87)');
        }


       
       
    }

Обработчик обычный, без премудростей:

<?php
$to = "o.dollar@yandex.ru"; // емайл получателя данных из формы
$tema = "Эскиз из конструктора"; // тема полученного емайла
$message = "Имя: ".$_POST['imy']."<br>";//присвоить переменной значение, полученное из формы name=name
$message .= "E-mail: ".$_POST['email']."<br>"; //полученное из формы name=email
$message .= "Номер телефона: ".$_POST['telefon']."<br>"; //полученное из формы name=phone
$message .= "Эскиз: ".$_POST['img']."<br>"; //полученное из формы name=message
$headers  = 'MIME-Version: 1.0' . "\r\n"; // заголовок соответствует формату плюс символ перевода строки
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; // указывает на тип посылаемого контента
mail($to, $tema, $message, $headers); //отправляет получателю на емайл значения переменных
?>

Так вот это поле $message .= "Эскиз: ".$_POST['img']."<br>"; //полученное из формы name=message, передает текстовое поле в base64. И соответственно это ооочень большая строка.

Вопрос: Как передать именно изображение в формате .png или .jpg, ну или же хотя бы в .pdf???

 

[velwind]

Так вот это поле $message .= "Эскиз: ".$_POST['img']."<br>"; //полученное из формы name=message, передает текстовое поле в base64. И соответственно это ооочень большая строка.
Вопрос: Как передать именно изображение в формате .png или .jpg, ну или же хотя бы в .pdf???

Так это уже и есть PNG изображение. Сделать base64_decode($_POST['img']) и запихнуть это в бинарный файл
Потом приаттачить этот файл к письму