title: Signature to Image not saving signature. Thomas bradley sigPad
body: <p>Alright so I have the signature pad running and it works. It also creates the signature.png in my working directory just fine.However, The png is blank and its not saving the signature.</p>
  
  <p>All of the files are listed below.</p>
  
  <p>This first one is the form.</p>
  
  <pre><code> &lt;html&gt;&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Full-Window · Signature Pad&lt;/title&gt;
    &lt;style&gt;
      * {
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
      }
      html, body {
          min-height: 100%;
          height: 100%;
          max-width: 100%;
          width: 100%;
          overflow: hidden;
      }
      html, body, form {
          margin: 0px;
      }
      html, form {
          padding: 0px;
      }
      html, body, fieldset {
          background: #aaa;
      }
      fieldset {
          position: absolute;
          border: 5px solid #aaa;
          background: #aaa;
          right: 0px;
          bottom: 0px;
      }
      canvas {
          outline: 5px solid #aaa;
          background: #fff;
      }
      input[type=submit], input[type=reset] {
          font-size: larger;
      }
    &lt;/style&gt;
    &lt;link rel="stylesheet" href="assets/jquery.signaturepad.css"&gt;
    &lt;!--[if lt IE 9]&gt;&lt;script src="../assets/flashcanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form method="post" action="finaladd.php" class="sigPad"&gt;
  
    &lt;div class="sig sigWrapper"&gt;
      &lt;div class="typed"&gt;&lt;/div&gt;
      &lt;canvas class="pad" width="198" height="55"&gt;&lt;/canvas&gt;
      &lt;input type="hidden" name="output" class="output"&gt;
      &lt;fieldset&gt;
              &lt;input type="reset" value="clear" /&gt;
              &lt;input type='submit' value='submit'/&gt;
          &lt;/fieldset&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  
  
  
    &lt;script src="assets/numeric-1.2.6.min.js"&gt;&lt;/script&gt;
    &lt;script src="assets/bezier.js"&gt;&lt;/script&gt;
    &lt;script src="jquery.signaturepad.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    (function(window) {
      var $canvas,
          onResize = function(event) {
            $canvas.attr({
              height: window.innerHeight,
              width: window.innerWidth
            });
          };
  
      $(document).ready(function() {
        $canvas = $('canvas');
        window.addEventListener('orientationchange', onResize, false);
        window.addEventListener('resize', onResize, false);
        onResize();
  
        $('form').signaturePad({
          drawBezierCurves: true,
          variableStrokeWidth:true,
          drawOnly: true,
          defaultAction: 'drawIt',
          validateFields: false,
          lineWidth: 0,
          output: null,
          sigNav: null,
          name: null,
          submit: 'input[type=submit]',
          typed: null,
          clear: 'input[type=reset]',
          typeIt: null,
          drawIt: null,
          typeItDesc: null,
          drawItDesc: null
        });
      });
    }(this));
    &lt;/script&gt;
    &lt;script src="assets/json2.min.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>this next one is where the form post too and saved to signature.png</p>
  
  <pre><code>&lt;?php
  require_once 'signature-to-image.php';
  
  $json = $_POST['output']; // From Signature Pad
  $img = sigJsonToImage($json);
  
  imagepng($img, 'signature.png');
  imagedestroy($img);
  // Destroy the image in memory when complete
  </code></pre>
  
  <p>and this last one is the signature-to-image.php file that it requires.</p>
  
  <pre><code>&lt;?php
  /**
   *  Signature to Image: A supplemental script for Signature Pad that
   *  generates an image of the signature’s JSON output server-side using PHP.
   *
   *  @project ca.thomasjbradley.applications.signaturetoimage
   *  @author Thomas J Bradley &lt;hey@thomasjbradley.ca&gt;
   *  @link http://thomasjbradley.ca/lab/signature-to-image
   *  @link http://github.com/thomasjbradley/signature-to-image
   *  @copyright Copyright MMXI–, Thomas J Bradley
   *  @license New BSD License
   *  @version 1.1.0
   */
  /**
   *  Accepts a signature created by signature pad in Json format
   *  Converts it to an image resource
   *  The image resource can then be changed into png, jpg whatever PHP GD supports
   *
   *  To create a nicely anti-aliased graphic the signature is drawn 12 times it's original size then shrunken
   *
   *  @param string|array $json
   *  @param array $options OPTIONAL; the options for image creation
   *    imageSize =&gt; array(width, height)
   *    bgColour =&gt; array(red, green, blue) | transparent
   *    penWidth =&gt; int
   *    penColour =&gt; array(red, green, blue)
   *    drawMultiplier =&gt; int
   *
   *  @return object
   */
  function sigJsonToImage ($json, $options = array()) {
    $defaultOptions = array(
      'imageSize' =&gt; array(198, 55)
      ,'bgColour' =&gt; array(0xff, 0xff, 0xff)
      ,'penWidth' =&gt; 2
      ,'penColour' =&gt; array(0x14, 0x53, 0x94)
      ,'drawMultiplier'=&gt; 12
    );
    $options = array_merge($defaultOptions, $options);
    $img = imagecreatetruecolor($options['imageSize'][0] * $options['drawMultiplier'], $options['imageSize'][1] * $options['drawMultiplier']);
    if ($options['bgColour'] == 'transparent') {
      imagesavealpha($img, true);
      $bg = imagecolorallocatealpha($img, 0, 0, 0, 127);
    } else {
      $bg = imagecolorallocate($img, $options['bgColour'][0], $options['bgColour'][1], $options['bgColour'][2]);
    }
    $pen = imagecolorallocate($img, $options['penColour'][0], $options['penColour'][1], $options['penColour'][2]);
    imagefill($img, 0, 0, $bg);
    if (is_string($json))
      $json = json_decode(stripslashes($json));
    foreach ($json as $v)
      drawThickLine($img, $v-&gt;lx * $options['drawMultiplier'], $v-&gt;ly * $options['drawMultiplier'], $v-&gt;mx * $options['drawMultiplier'], $v-&gt;my * $options['drawMultiplier'], $pen, $options['penWidth'] * ($options['drawMultiplier'] / 2));
    $imgDest = imagecreatetruecolor($options['imageSize'][0], $options['imageSize'][1]);
    if ($options['bgColour'] == 'transparent') {
      imagealphablending($imgDest, false);
      imagesavealpha($imgDest, true);
    }
    imagecopyresampled($imgDest, $img, 0, 0, 0, 0, $options['imageSize'][0], $options['imageSize'][0], $options['imageSize'][0] * $options['drawMultiplier'], $options['imageSize'][0] * $options['drawMultiplier']);
    imagedestroy($img);
    return $imgDest;
  }
  /**
   *  Draws a thick line
   *  Changing the thickness of a line using imagesetthickness doesn't produce as nice of result
   *
   *  @param object $img
   *  @param int $startX
   *  @param int $startY
   *  @param int $endX
   *  @param int $endY
   *  @param object $colour
   *  @param int $thickness
   *
   *  @return void
   */
  function drawThickLine ($img, $startX, $startY, $endX, $endY, $colour, $thickness) {
    $angle = (atan2(($startY - $endY), ($endX - $startX)));
    $dist_x = $thickness * (sin($angle));
    $dist_y = $thickness * (cos($angle));
    $p1x = ceil(($startX + $dist_x));
    $p1y = ceil(($startY + $dist_y));
    $p2x = ceil(($endX + $dist_x));
    $p2y = ceil(($endY + $dist_y));
    $p3x = ceil(($endX - $dist_x));
    $p3y = ceil(($endY - $dist_y));
    $p4x = ceil(($startX - $dist_x));
    $p4y = ceil(($startY - $dist_y));
    $array = array(0=&gt;$p1x, $p1y, $p2x, $p2y, $p3x, $p3y, $p4x, $p4y);
    imagefilledpolygon($img, $array, (count($array)/2), $colour);
  }
  </code></pre>
  
  <p>If someone could please help me. I have been trying for days now to get this to work with no success.</p>
  
  <p>the error that I keep getting is.</p>
  
  <pre><code>Warning: Invalid argument supplied for foreach() in C:\xampp\htdocs\CareMed\signature-to-image.php on line 51
  </code></pre>
  
  <p>I also did this dump below</p>
  
  <pre><code>$json = $_POST['output'];
  var_dump($json, json_decode(stripslashes($json)));
  </code></pre>