使用PHP和HTML控制保存图像的大小

Question

in my web app im using the following piece of code to snap image from webcam and save it on the server :

JS:

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 < 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);

HTML:

            <div id="camera">
                    <div class="center clear">
                        <video id="video" class="picCapture" autoplay></video>
                        <button id="snap" type="button" class="btn btn-default" onclick="return false;">Take Picture</button>
                        <canvas id="canvas" class="picCapture"></canvas>
                    </div>
                </div>

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??

my saveImage() function is as follows:

//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!');
           }
       }
   });
};

and in case its relevant the PHP side of this thing is:

$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);
}

any idea where can i control the size of the saved image?

Answer 1

You haven't set the width and height on the canvas element.

<canvas id="canvas" class="picCapture" width="300" height="300"></canvas>

This is needed for getContext() you can read more about it here https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext

---

Also I noticed that the if statement was failing and this should be a better solution for that.

    var id = parseInt(document.getElementById('user_id').value);// get user id

    if (Number.isInteger(id)) {