Getting black picture when attaching a base64 img - php

Question

I'm trying to send an email with an image attachment. I'm able to send the email,but I have no success with displaying the picture, its just black. The php is receiving a base64 string that it is an image. Also I want to do it without storing anything or writing anything on the server. Is there a possible way to do this?
This is what the php looks like.
<?php
$base64 = $_POST['dataURL'];
//define the receiver of the email
$to = 'some#mail.com';
//define the subject of the email
$subject = 'Test email with attachment';
//create a boundary string. It must be unique
//so we use the MD5 algorithm to generate a random hash
$random_hash = md5(date('r', time()));
//define the headers we want passed. Note that they are separated with \r\n
$headers = "From:Francisco Granado\r\nReply-To: webmaster#example.com";
//add boundary string and mime type specification
$headers .= "\r\nContent-Type: multipart/mixed; boundary=\"PHP-mixed-".$random_hash."\"";
//read the atachment file contents into a string,
//encode it with MIME base64,
//and split it into smaller chunks
$attachment = base64_decode($base64);
//define the body of the message.
ob_start(); //Turn on output buffering
?>
--PHP-mixed-<?php echo $random_hash; ?>
Content-Type: multipart/alternative; boundary="PHP-alt-<?php echo $random_hash; ?>"
--PHP-alt-<?php echo $random_hash; ?>
Content-Type: text/plain; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit
This email have attached a image file
For SED_WE analysis purposes.
--PHP-alt-<?php echo $random_hash; ?>
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: 7bit
<h1>SED_WE</h1>
<p>This email have attached a image file </p>
<p>For SED_WE analysis purposes.</p>
--PHP-alt-<?php echo $random_hash; ?>--
--PHP-mixed-<?php echo $random_hash; ?>
Content-Type: image/jpeg; name="attachment.jpeg"
Content-Transfer-Encoding: base64
Content-Disposition: attachment
<?php echo $attachment; ?>
--PHP-mixed-<?php echo $random_hash; ?>--
<?php
//copy current buffer contents into $message variable and delete current output buffer
$message = ob_get_clean();
//send the email
$mail_sent = #mail( $to, $subject, $message, $headers );
//if the message is sent successfully print "Mail sent". Otherwise print "Mail failed"
echo $mail_sent ? "Mail sent" : "Mail failed";
?>
Also here is my js:
$(document).ready(function (e) {
var imgBase64;
function imgToBase64(url, callback, outputFormat) {
var canvas = document.createElement('CANVAS'); //Creates variable containing canvas in the DOM
var canvas_context = canvas.getContext('2d'); //Creates canvas environment (context) in 2 dimensions
var img = new Image; // new Image instance
img.crossOrigin = 'Anonymous'; //Cross origin textures from other URL's are permitted (see http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html) for more information
console.log('ON LOAD IMG');
//Image load trigger, encode image into base64
img.onload = function () {
//Determine canvas height and width
canvas.height = img.height;
canvas.width = img.width;
console.log('Canvas info:\n Height: ' + canvas.height + '\n Width: ' + canvas.width);
//Draws the image raw format
canvas_context.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png'); //THIS IS WHERE THE MAGIC HAPPENS (img encode to base64)
//imgBase64 = dataURL;
$('#show-picture').attr('src', dataURL); //Change source of the #show-picture image tag to the base64 string to show preview to user
console.log(dataURL);
callback.call(this, dataURL); //Callback function #param {dataURL}
// Clean up
canvas = null;
};
img.src = url;
}
//Reads the path to the picture for a preview
function readURL(input) {
if (input.files && input.files[0]) { //if file exist
var reader = new FileReader(); //new instance of the file reader
reader.onload = function (e) { //when the reader loads the chosen file...
imgToBase64(e.target.result, function (dataURL) { //..then the is converted
setDataURL(dataURL);
});
}
reader.readAsDataURL(input.files[0]);
}
}
function setDataURL(dataURL){
imgBase64 = dataURL;
console.log('setDataUrl=>'+imgBase64);
}
$('#take-picture').change(function () {
readURL(this);
console.log('ONLOAD'+imgBase64);
});
$('#uploadImgBtn').on('click',function(){
var base64String= imgBase64.replace(/data:image[^;]+;base64,/,'');
console.log('base64string'+base64String);
$.post('php/mailer.php',base64String,function(data){alert('Success!'); console.log('response: '+data)});
});
});
P.S: I've tried different things from other post, but there's no success or they write on the server, also it's my first time on php so any good suggestion are very welcomed.

Answer 1

In the javascript file where it sends the data to php there was no key name of dataURL, and I needed to remove the data:image/*;base64, out of the string to send the pure base64. So its suppose to be like this:
$('#uploadImgBtn').on('click',function(){
var base64String= imgBase64.replace(/data:image[^;]+;base64,/,'');
console.log('base64string'+base64String);
$.post('php/mailer.php',{dataURL:base64String},function(data){
alert('Success!');
console.log('response: '+data)});
});
Then the php would receive the dataURL and all I needed to do it was chunk_split that base64 string. Like this:
$base64 = $_POST['dataURL'];
...
$attachment = chunk_split($base64);
...