title: control size of saved image using PHP and HTML
body: <p>in my web app im using the following piece of code to snap image from webcam and save it on the server :</p>
  
  <p>JS:</p>
  
  <pre><code>window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
      context = canvas.getContext("2d"),
      video = document.getElementById("video"),
      videoObj = { "video": true },
      errBack = function(error) {
        console.log("Video capture error: ", error.code);
      };
  
    // Put video listeners into place
    if(navigator.getUserMedia) { // Standard
      navigator.getUserMedia(videoObj, function(stream) {
        video.src = stream;
        video.play();
      }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
      navigator.webkitGetUserMedia(videoObj, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
      }, errBack);
    } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
      navigator.mozGetUserMedia(videoObj, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
      }, errBack);
    }
  
    var pic_id = 0; //picture id
  
    document.getElementById("snap").addEventListener("click", function() {
          var id = document.getElementById('user_id').value;// get user id
  
          if(IsNumeric(id)) {
            if(pic_id &lt; 8) {
            context.drawImage(video, 0, 0, 320, 320);
  
            var image = document.getElementById("canvas"); // get the canvas
            var pngUrl = canvas.toDataURL('image/png');
  
            saveImage(pngUrl, id, pic_id);
            pic_id++;
  
            } else if (pic_id ==8){
              document.getElementById('form-submit').style.pointerEvents = "all";
            }
        }else {
          console.log("please fill up the form before taking pictures");
        }
  
    });
  }, false);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>            &lt;div id="camera"&gt;
                      &lt;div class="center clear"&gt;
                          &lt;video id="video" class="picCapture" autoplay&gt;&lt;/video&gt;
                          &lt;button id="snap" type="button" class="btn btn-default" onclick="return false;"&gt;Take Picture&lt;/button&gt;
                          &lt;canvas id="canvas" class="picCapture"&gt;&lt;/canvas&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>the problem is no matter what i do the image always saved in the size of 300X150 pixels. i tried finding tracks to the some code defining this measurements but couldn't find any. actually the number 150 doesn't even exists in my project, so it makes wonder if the solution is on the server side??</p>
  
  <p>my <code>saveImage()</code> function is as follows:</p>
  
  <pre><code>//passes base64 image
  function saveImage(image , user_id, pic_id){
  
    jQuery.ajax({
         url: '../save.php',
         type: 'POST',
         data: { pngUrl: image, id: user_id, pic_id: pic_id },
         complete: function(data, status)
         {
             if(status=='success')
             {
                alert('saved!');
             }
         }
     });
  };
  </code></pre>
  
  <p>and in case its relevant the PHP side of this thing is:</p>
  
  <pre><code>$post_data = $_POST['pngUrl'];
  $user_id = $_POST['id'];
  $pic_id = $_POST['pic_id']; // get the picture id from the catch-pic.js script
  
  
  if (!empty($post_data)){
  list($type, $post_data) = explode(';', $post_data);
  list(, $post_data)      = explode(',', $post_data);
  $post_data = base64_decode($post_data);
  
  $img_name = $user_id."-a".$pic_id.".png";
  $img_path = IMG_PATH.$img_name;
  
  file_put_contents($img_path, $post_data);
  }
  </code></pre>
  
  <p>any idea where can i control the size of the saved image?</p>