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

Question

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

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

您还没有设置 width和 height在 Canvas 元素上。

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