title: Saving Canvas Image to Server with Javascript+PHP
body: <p>I have implemented a system where people can report from when to when they have visited a customer, and what they have done there. Now i want to add a function that lets the customers sign the specified service. They can rewiew the reported data, and under this overview i have implemented an HTML5 canvas with signature_pad (<a href="https://github.com/szimek/signature_pad" rel="nofollow noreferrer">https://github.com/szimek/signature_pad</a>), so they can accept the data.<br/>
  <br/>
  Under the signature pad there are two buttons. One to clear the signature, and one to save the signature. <br/>
  <br/>
  What i want to implement now is, that when you click the SAVE button, the content of the canvas is stored as a file on the website, after a fresh signature ID has been pulled from the database, and then the user is forwarded to the page with the overview over his reports.<br/>
  <br/>
  I am handling all database operations in a central handlers.php file, that is loaded with the base system.php framework, and checks for required activities with "if (isset($_POST['NameOfTheFunction']))".</p>
  
  <p>A little background to how the website works:<br/>
  Overview of the filesystem:<br/>
  .\system.php &lt;- provides the framework with database connection, languaegesettings, and loads all content<br/>
  .\content\addsignature.php &lt;- is one content that can be loaded. If provided an existing report-id shows a signature form to sign a service<br/>
  .\content\handlers.php &lt;- Is loaded by system.php and "listens" for actions it should take<br/>
  .\js\signature.js &lt;- Is supposed to handle for example the clicking of the save button<br/></p>
  
  <p>Here's the part that created the canvas (addsignature.php):<br/>
  <br/></p>
  
  <pre><code>echo "
  &lt;div class=\"row vdivide\"&gt;
      &lt;div class=\"col-sm-2 text-center\"&gt;&lt;input type=\"hidden\" name=\"rid\" id=\"rid\" value=\"".$_GET['rid']."\"&gt;&lt;/div&gt;
      &lt;div class=\"col-sm-8 text-center\"&gt;
          &lt;div id=\"signature-pad\" class=\"signature-pad\"&gt;
              &lt;div class=\"signature-pad--body\"&gt;
                  &lt;canvas&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=\"col-sm-2 text-center\"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=\"row vdivide\"&gt;
      &lt;div class=\"col-sm-2 text-center\"&gt;&lt;/div&gt;
      &lt;div class=\"col-sm-4 text-center\"&gt;
          &lt;div class=\"btn-group\"&gt;
              &lt;button type=\"button\" class=\"btn btn-primary\" aria-haspopup=\"true\" aria-expanded=\"false\" data-action=\"clear\"&gt;".$clear."&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=\"col-sm-4 text-center\"&gt;
          &lt;div class=\"btn-group\"&gt;
              &lt;button type=\"button\" class=\"btn btn-primary\" aria-haspopup=\"true\" aria-expanded=\"false\" data-action=\"save\"&gt;".$save."&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=\"col-sm-2 text-center\"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src=\"./js/signature_pad.umd.js?v=".time()."\"&gt;&lt;/script&gt;
  &lt;script src=\"./js/signature.js?v=".time()."\"&gt;&lt;/script&gt;
  ";
  </code></pre>
  
  <p><br/>
  And here is the relevant part of the signature.js to save the file:<br/>
  <br/></p>
  
  <pre><code>var saveButton = document.querySelector("[data-action=save]");
      saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
      alert("Please provide a signature first.");
    } else {
      var dataURL = signaturePad.toDataURL("image/jpeg");
      //alert("RID: " + rid + "DataURL:" + dataURL);
      $.ajax({
        type: "POST",
        url: "../system.php",
        data: {
           imgBase64: dataURL,
           rid: rid,
           SaveSignature: true
        }
      });
    }
  });
  </code></pre>
  
  <p><br/>
  And here is the content of the handlers.php file:<br/>
  <br/></p>
  
  <pre><code>if (isset($_POST['SaveSignature'])) {
      $query = "INSERT INTO signatures (SIG_RID) VALUES ('".$_POST['rid']."')";
      try {
          $statement = $dbc-&gt;prepare($query);
          $statement-&gt;execute();
          $message = "&lt;div class=\"alert alert-success alert-dismissible\"&gt;
  &lt;a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\"&gt;&amp;times;&lt;/a&gt;
      ".$signaturesavesuccess."
  &lt;/div&gt;";
      }
      catch (PDOException $e) {
         $message = "&lt;div class=\"alert alert-danger alert-dismissible\"&gt;
  &lt;a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\"&gt;&amp;times;&lt;/a&gt;
      ".$signaturesavefailure."
  &lt;/div&gt;";
      }
  
      $query = "SELECT SIG_ID FROM signatures WHERE SIG_RID = '".$_POST['rid']."'";
      foreach ($dbc-&gt;query($query) as $row) {
          $sigid = $row['SIG_ID'];
      }
  
      $query = "UPDATE reports SET R_Signature = '".$sigid."' WHERE R_ID = '".$_POST['rid']."'";
      try {
          $statement = $dbc-&gt;prepare($query);
          $statement-&gt;execute();
          $message = "&lt;div class=\"alert alert-success alert-dismissible\"&gt;
  &lt;a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\"&gt;&amp;times;&lt;/a&gt;
      ".$signaturesavesuccess."
  &lt;/div&gt;";
      }
      catch (PDOException $e) {
         $message = "&lt;div class=\"alert alert-danger alert-dismissible\"&gt;
  &lt;a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\"&gt;&amp;times;&lt;/a&gt;
      ".$signaturesavefailure."
  &lt;/div&gt;";
      }
  
      define('UPLOAD_DIR', 'signatures/');
      $img = $_POST['imgBase64'];
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $file = UPLOAD_DIR . $sigid . '.jpg';
      $success = file_put_contents($file, $data);
      print $success ? $file : 'Unable to save the file.';
  
  }
  </code></pre>
  
  <p>So what i want is the whole "SaveSignature"-part of the handlers.php called, the image saved to the specified location, and the user forwarded to the page "system.php?site=myreports".</p>
  
  <p>I hope anyone here can help me with that. I have no idea what could be wrong.</p>