Send Base64 Via PHP Mail

Question

I'm attempting to send a base64 encoded image as an attachment using PHP mail, but it doesn't seem to be working.

My script is as below:

 <?php

 if(!empty($_POST['email'])){

    $name = $_POST['name'];
    $email = $_POST['email'];
    $company = $_POST['company']; 
    $size = $_POST['size']; 
    $colour = $_POST['colour'];
    $lid = $_POST['lid']; 
    $quantity = $_POST['quantity'];
    $image = $_POST['image'];

    $file_name = "bottle-design.png";
    $file_contents = chunk_split($image); 
    $uid = md5(time());
    $headers = array();

    $subject = "Bottle Design Quote";
    $message = "Customer Name: $name<br/> Customer Email: $email<br/> Company Name: $company<br/> Bottle Size: $size<br/> Bottle Color: $colour<br/> Bottle Lid: $lid<br/> Quantity: $quantity<br/> Design: $image";
    $to = "alex@givemetap.com,alex@saidani.co.uk";

    $headers[] = "MIME-Version: 1.0";
    $headers[] = "From: {$name}<{$email}>";
    $headers[] = "Reply-To: {$email}";
    $headers[] = "Content-Type: multipart/mixed; boundary=\"{$uid}\"";
    $headers[] = "This is a multi-part message in MIME format.";
    $headers[] = "--{$uid}";
    $headers[] = "Content-type:text/plain; charset=iso-8859-1";
    $headers[] = "Content-Transfer-Encoding: 7bit";
    $headers[] = $message;
    $headers[] = "--{$uid}";
    $headers[] = "Content-Type: application/octet-stream; name=\"{$file_name}\"";
    $headers[] = "Content-Transfer-Encoding: base64";
    $headers[] = "Content-Disposition: attachment; filename=\"{$file_name}\"";
    $headers[] = $file_contents;
    $headers[] = "--{$uid}--";


    mail($to,$subject,$message,implode("\r\n", $headers));

    header('Location: ../success.php'); 

   }
   else 
   {
       header('Location: builder.php');
   }
?>

My base64 value is created using javascript as below:

function convertImage() {
    var bottleCanvas = document.getElementById('bottleCanvas');
    var designCanvas = document.getElementById('editorCanvas');
    var bottleContext = bottleCanvas.getContext('2d');

    if($('.colourCanvas500').is(':visible')) {
        bottleContext.drawImage(designCanvas, 153, 250);
    }
    else if($('.colourCanvas600').is(':visible')) {
        bottleContext.drawImage(designCanvas, 155, 238);
    }
    else if($('.whiteCanvas500').is(':visible')) { 
        bottleContext.drawImage(designCanvas, 132, 235);
    }
    else if($('.whiteCanvas600').is(':visible')) {
        bottleContext.drawImage(designCanvas, 132, 235);
    }

    var data = bottleCanvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.download = "bottle-design.png";
    var dataLink = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    //document.write(dataLink);
    link.href = dataLink;
    link.click();

    $('#imageInput').val(data);

    $('form[name="bottleDetails"]').submit();
}

How would I go about getting this to work, or is there a better way of sending a base64 image via email?

---

I've used the following code to get it working using Apple Mail, whilst the image does send to all other mail clients the file appears to be corrupt.

$message = "

        Content-Type: multipart/related; boundary='boundary-example'; type='text/html'

--boundary-example
Content-Type: text/html; charset='US-ASCII'

Customer Name: $name<br/> Customer Email: $email<br/> Company Name: $company<br/> Bottle Size: $size<br/> Bottle Color: $colour<br/> Bottle Lid: $lid<br/> Quantity: $quantity<br/> Design:

<IMG SRC='cid:bottle-design' ALT='bottle design'>

--boundary-example
Content-Location: CID:somethingatelse ; this header is disregarded
Content-ID: <bottle-design>
Content-Type: IMAGE/PNG
Content-Transfer-Encoding: BASE64

$img

--boundary-example--";