用ajax发布发送base64图像

Question

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 base64 with toDataURL().

here's my JS:

  function genImg(){ html2canvas(document.querySelector("#ogImage")).then(canvas => { var renderedImg = canvas.toDataURL() $.ajax({ type: "POST", url: "script.php", data: { base64Img: renderedImg } }).done(function(o){ console.log("saved") console.log(renderedImg); }) }); } 

And here's my script.php file:

<?php
   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64, ', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   //saving
   $fileName = 'photo.png';
   file_put_contents($fileName, $fileData);
?>

Both scripts are working and a png is generated with the correct output name, but the generated png is empty. I checked the received request and what is sent in post, both are different... console.log(renderedImg) is a really really long base64 code. and the request is also a base64 code but clearly shorter. Is there a limit of what can be send with POST request ? or do I forgot something ?

Also to check where my problem is, I copy/paste the javascript console.log(renderedImg) output and decoded it with https://www.base64decode.org/ the result is exactly the image i needed. Then I tried with the POST request data and it's the same result as the generated png file, empty.

So I'm pretty sure that my problem is when the data are sent from ajax to PHP.

Answer 1

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

Answer 2

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