'Send the information of the form and the generated image to an email

I am using this java to convert the form information in a png image, but now what I want to do is send the png image and form data to an email

JS

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#widget"), {
      onrendered: function(canvas) {
        theCanvas = canvas;
        document.body.appendChild(canvas);
        $("#shadow").fadeIn(500);
        // Convert and download as image

        Canvas2Image.saveAsPNG(canvas);
        $("#img-out").append(canvas);
        // Clean up
        //document.body.removeChild(canvas);
      }
    });
  });
});

function closeImg() {
  $("canvas").attr("id", "render");
  $("#shadow").fadeOut(500);
  $("#render").remove();
  $("#all").fadeIn(500);
}

I have this php but I have only been able to send the data, but I don't know how to send the image.

PHP

<?php

if($_POST && isset($_FILES['my_file']))
{

    $from_email = $_POST['email']; //sender email
    $recipient_email = '[email protected]'; //recipient email
    $subject = 'Enquiry'; //subject of email
    $message.=',txtEvento :'.$_POST['evento'].',';
    $message.=',txtDifunto :'.$_POST['difunto'].',';
    $message.=',txtEdad :'.$_POST['edad'].',';
    $message.=',txtParr1 :'.$_POST['parr1'].',';
    $message.=',txtParr2 :'.$_POST['parr2'].',';
    $message.=',txtLugar :'.$_POST['lugar'].',';
    $message.=',txtFecha :'.$_POST['fecha'].',';


    //get file details we need
    $file_tmp_name    = $_FILES['my_file']['tmp_name'];
    $file_name        = $_FILES['my_file']['name'];
    $file_size        = $_FILES['my_file']['size'];
    $file_type        = $_FILES['my_file']['type'];
    $file_error       = $_FILES['my_file']['error'];

    $user_email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);

    if($file_error>0)
    {
        die('upload error');
    }
    //read from the uploaded file & base64_encode content for the mail
    $handle = fopen($file_tmp_name, "r");
    $content = fread($handle, $file_size);
    fclose($handle);
    $encoded_content = chunk_split(base64_encode($content));


         $boundary = md5("e-p-c-l");
        //header
        $headers = "MIME-Version: 1.0\r\n";
        $headers .= "From:".$from_email."\r\n";
        $headers .= "Reply-To: ".$user_email."" . "\r\n";
        $headers .= "Content-Type: multipart/mixed; boundary = $boundary\r\n\r\n";

        //plain text
         $body = "--$boundary\r\n";
        $body .= "Content-Type: text/plain; charset=ISO-8859-1\r\n";
        $body .= "Content-Transfer-Encoding: base64\r\n\r\n";
        $body .= chunk_split(base64_encode($message));

        //attachment
          $body .= "--$boundary\r\n";
        $body .="Content-Type: $file_type; name=\"$file_name\"\r\n";
        $body .="Content-Disposition: attachment; filename=\"$file_name\"\r\n";
        $body .="Content-Transfer-Encoding: base64\r\n";
        $body .="X-Attachment-Id: ".rand(1000,99999)."\r\n\r\n";
        $body .= $encoded_content;

    $sentMail = @mail($recipient_email, $subject, $body, $headers);
    if($sentMail) //output success or failure messages
    {
        header("location:thanq.php");
    }else{
        die('Please contact by phone or email');
    }
}?>

I know that the php file has other things that are not used, but I took it from another project.

The image is displayed in a lightbox when the user completes the form.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source