douhan4243 2016-06-09 03:13
浏览 29
已采纳

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

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?

展开全部

  • 写回答

2条回答 默认 最新

  • dpsr1670 2016-06-11 03:55
    关注

    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)) {
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 R语言regionNames()和demomap()无法选中中文地区的问题
  • ¥15 Open GL ES 的使用
  • ¥15 我如果只想表示节点的结构信息,使用GCN方法不进行训练可以吗
  • ¥15 GPTs营销指令提示词和创建方案
  • ¥15 QT6将音频采样数据转PCM
  • ¥15 本地安装org.Hs.eg.dby一直这样的图片报错如何解决?
  • ¥15 下面三个文件分别是OFDM波形的数据,我的思路公式和我写的成像算法代码,有没有人能帮我改一改,如何解决?
  • ¥15 Ubuntu打开gazebo模型调不出来,如何解决?
  • ¥100 有chang请一位会arm和dsp的朋友解读一个工程
  • ¥50 求代做一个阿里云百炼的小实验