title: canvas..toDataURL and upload it
body: <p>Am working on converting canvas to image and upload it to server when the user submit the form.
  The image posted correctly but it appears empty in the server. </p>
  
  <p>Here is my code, (Am using phonegap)
  <code>.drawImage ()</code>is in the main.js .. but <code>canvas..toDataURL</code>is in a script in the html</p>
  
  <pre><code> &lt;script&gt;
  
   function insert()
   {
  var img = document.getElementById("myCanvas")[0].toDataURL("image/jpeg");
  $.ajax({
  type: "POST",
  
  url: "http://*******************/create.php?title="+      ($("#myTitle").val())+"&amp;description="
  +$("#myDesc").val()+"&amp;price="+$("#myPrice").val(),
  
  data: {img: img},
  success: function(data)
  {
      alert("inserted");
  }});
  
  &lt;/script&gt;
  </code></pre>
  
  <p>php</p>
  
  <pre><code>$img = $_POST['img'];
  $img = str_replace('data:image/png;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  $file = uniqid() . '.png';
  $success = file_put_contents($file, $data);
  print $success ? $file : 'Unable to save the file.'; 
  </code></pre>
  
  <p>Any idea ?</p>
  
  <p><strong><em>EDIT !!!</em></strong></p>
  
  <p>Finally it is UPLOADING!!!</p>
  
  <p>Thanks to Jack Franzen for his suggestion.
  I've changed the php code to </p>
  
  <pre><code>$img = $_POST['img'];
  $img = str_replace('data:image/jpeg;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  $file = uniqid() . '.jpg';
  $success = file_put_contents($file, $data);
  </code></pre>
  
  <p>and it is working as charm! :)</p>