Post Sending Base64 Image With Ajax

I'm trying to generate an image out of a canvas and send it to server through a POST request made with ajax. I'm using html2canvas to convert a div to canvas and to convert it into

Solution 1:

I finally managed to do it, The problem was located in the PHP file:

<?php
 define('UPLOAD_DIR', 'images/');
 // previously it was $img = $_POST['data']
 $img = $_POST['imgBase64'];
 $img = str_replace('data:image/png;base64,', '', $img);
 $img = str_replace(' ', '+', $img);
 $data = base64_decode($img);
 $file = UPLOAD_DIR . 'test.png';
 $success = file_put_contents($file, $data);
 //send request to ocr
 print $success ? $file : 'Unable to save the file.';
?>

From now, my saved image is exactly the one needed

Solution 2:

Data url have the form data:[<media type>][;base64],<data> You have to strip the data:[<media type>][;base64], part before you decode.
Also use $_POST['base64Img'] to access the data as base64Img is what you used in your ajax request