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

Question

在我的网络应用程序im中，使用以下代码从网络摄像头捕捉图像并将其保存在服务器上：

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>

问题是无论我做什么图像始终以300X150像素的大小保存。 我试图找到定义此测量的一些代码的轨道，但找不到任何。 实际上150甚至不存在于我的项目中，因此它使解决方案是否在服务器端产生了疑问？

我的saveImage()函数如下：

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

并且如果它与PHP有关，则它是：

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

知道我在哪里可以控制保存图像的大小吗？

Answer 1

您尚未在canvas元素上设置width和height 。

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

这对于getContext()是必需的，您可以在这里阅读有关它的更多信息https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext

---

我也注意到if语句失败了，这应该是一个更好的解决方案。

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

    if (Number.isInteger(id)) {

Answer 2

捕获的图片为300 x 150像素，因为这些是canvas和video元素的默认尺寸。

您应该在HTML，CSS或Javascript中为这些元素指定尺寸。