title: Send canvas and form to server save image with custom name
body: <p>I am trying to send the canvas image to the server.</p>
  
  <p>Hi everyone I know this has been asked a lot. (I've already asked it once before)</p>
  
  <p>The form data is sent too and this is used to name the file sent to the server so that it is identifiable who drew the image.</p>
  
  <p>My site is <a href="http://www.lovetriangles.co.uk/indexPHPtest.html" rel="nofollow" title="My current site">here</a>!</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;form action="PHPtestupload.php" method="post"&gt;
        Name &lt;input type="text" name="name" value="" style="width:230px;  margin-left: -160px; font-size:1em; "/&gt;
  
        Email &lt;input type="email" name="email" value="" style="width:230px;  margin-top: 12px; margin-left: -160px; font-size:1em; "/&gt;
  
  
        &lt;input type="submit" onclick="postImagePlusForm();" value="Submit" style=" opacity:1; -webkit-appearance: none; width:100px; height:50px; margin-left: -50px;"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>      // sends image to server
  // serialize your canvas
  var dataURL=document.getElementById('colors_sketch').toDataURL(image/png);
  
  // serialize your form
  var str = $("form").serializeArray();
  
  // wrap both in an object
  var package={ formData: str, imageDataURL: dataURL }
  
  
  
  
  // ajax it
  postImagePlusForm();
  
  function postImagePlusForm(){
  $.ajax({  
      type: "POST",  
      url: "PHPtestupload.php",  
      data: package,  
      success: function(value) {  
          // ...we have success!
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>PHP</p>
  
  <pre><code>if ( isset($_POST["imageDataURL"]) &amp;&amp; !empty($_POST["imageDataURL"]) ) {    
   // create $dataURL
  $dataURL = $_POST["imageDataURL"];  
  // Extract base64 data
  // we have an unneeded header, zap it
  $parts = explode(',', $dataURL);  
  $data = $parts[1];  
  // Decode
  $data = base64_decode($data);  
  // Save
  $fp = fopen('newImage.png', 'w');  
  fwrite($fp, $data);  
  fclose($fp); 
  
  if ( isset($_POST["formData"]) &amp;&amp; !empty($_POST["formData"]) ) {    
  $formData = $_POST['formData'];
  foreach ($formValue as $x) {
      // do whatever you need to do with each form value ($x)
  
  }
  </code></pre>
  
  <p>Alternative PHP using different Javascript on the web page, with semi-working site <a href="http://www.lovetriangles.co.uk/index1.html" rel="nofollow">here</a>!</p>
  
  <p>I think that the server shuts down the PHP as it functions locally but doesn't work when online. It generates lots of error logs.</p>
  
  <pre><code>    $data = file_get_contents('php://input');
  
          $canvasImg = imagecreatefrompng($data);
          $width  = imagesx($canvasImg);
          $height = imagesy($canvasImg);
  
  
          $outImg = imagecreatetruecolor($width, $height);
          $color = imagecolorallocatealpha($outImg, 255, 255, 255, 127);
          imagefill($outImg, 0, 0, $color);
          imagecopy($outImg, $canvasImg, 0, 0, 0, 0, $width, $height);
  
  
          imagepng($outImg, 'test.png');
  
  
          $name = $_POST['name'];
          $email = $_POST['email'];
          $target = 'test.png';
          $newName = $name . $email;
          rename($target, $newName);
  </code></pre>