How to save PNG image server side, from base64 javascript database

I have this code, either ajax is not passing data correctly, or my php is not working as expected. I know canvass saves the png data it writes to the page. Is there a way to just convert it to a file and save it from javascript?

START JAVASCRIPT: -------------------

<- get canvass element and convert to png data →

var canvas = document.getElementById("textCanvas"); 
var img = canvas.toDataURL("image/png");

      

        
        
        
      

    

<- END the canvass element and convert to png data →

<- SEND to php file →

var onmg = encodeURIComponent(img);
var xhr = new XMLHttpRequest();
var body = "img=" + onmg;
xhr.open('POST', "convertit.php",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-Length", body.length);
xhr.setRequestHeader("Connection", "close");
xhr.send(body);
xhr.onreadystatechange = function () {
   if (xhr.status == 200 && xhr.readyState == 4) {
     document.getElementById("div").innerHTML = xhr.responseText;
   } else {
     document.getElementById("div").innerHTML = 'loading';
     }
   }

      

        
        
        
      

    

<- END send to php file →

END JAVASCRIPT: -------------------

START PHP: -------------------

$img = $_POST['img']; 
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents('/uploads/file.png', $data);

      

        
        
        
      

    

END PHP: -------------------