title: Sending image data using AJAX and store on server
body: <p>PHP isn't receiving data from ajax, I am trying to create image by using canvas HTML5 and store it on my server using PHP, but when I do, I dont receive anything.</p>
  
  <p>image.php:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;canvas width="800" height="420" id="canvas"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  
  var img  = loadImage('images/quizes/sim.png' ,main);
  var img1 = loadImage('images/users/alfred.jpg', main);
  var img2 = loadImage('images/users/brynjar.jpg', main);
  
  
  var imagesLoaded = 0;
  function main() {
      imagesLoaded += 1;
  
      if(imagesLoaded == 3) {
  
          ctx.drawImage(img, 0, 0, 800, 420);
  
          ctx.drawImage(img1, 0, 0, 320, 320);
  
          ctx.drawImage(img2, 480, 0, 320, 320);
  
      }
  }
  
  function loadImage(src, onload) {
      var img = new Image();
  
      img.onload = onload;
      img.src = src;
  
      return img;
  }
  
  var dataURL = canvas.toDataURL();
  
  alert(dataURL);
  
  $.ajax({
      type: "POST",
      url: "script.php",
      data: {
          imgBase64: dataURL
      }
  }).done(function(o) {
      console.log('saved');
      // If you want the file to be visible in the browser
      // - please modify the callback in javascript. All you
      // need is to return the url to the file, you just saved
      // and than put the image in your browser.
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And I also have Script.php:</p>
  
  <pre><code>$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);
  </code></pre>
  
  <p>But when I run image.php, $_post['data'] doesn't pick up any data.</p>