t1441332354 2018-06-06 01:03 采纳率: 71.8%
浏览 3331
已采纳

如何将摄像头截取的图像上传到服务器

这是前段调取摄像头进行截图的代码

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>web RTC 测试</title>
  <style>
    .booth {
      width:400px;

      background:#ccc;
      border: 10px solid #ddd;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="booth">
    <video id="video" width="400" height="300"></video>
    <button id='tack'>拍照</button>
    <input type="button" onclick="uploadImage();" value="上传"/>
    <canvas id='canvas' width='400' height='300'></canvas>
    <img id='img' src=''>
  </div>


  <script>
    var video = document.getElementById('video'),
        canvas = document.getElementById('canvas'),
        snap = document.getElementById('tack'),
        img = document.getElementById('img'),
        vendorUrl = window.URL || window.webkitURL;

    //媒体对象
    navigator.getMedia = navigator.getUserMedia ||
                         navagator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;
    navigator.getMedia({
        video: true, //使用摄像头对象
        audio: false  //不适用音频
    }, function(strem){
        console.log(strem);
        video.src = vendorUrl.createObjectURL(strem);
        video.play();
    }, function(error) {
        //error.code
        console.log(error);
    });
    snap.addEventListener('click', function(){

        //绘制canvas图形
        canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

        //把canvas图像转为img图片
        img.src = canvas.toDataURL("image/png");

    });
  </script>
</body>
</html>

我现在想把获取的图片上传到服务器,具体上传的代码应该怎么写?(如果要链接后台,后台是Java)

  • 写回答

4条回答 默认 最新

  • Go 旅城通票 2018-06-06 01:06
    关注

    img.src = canvas.toDataURL("image/png");
    传递img.src到服务器,这个是base64编码过的图片字符串内容,服务器端将base64转为2进制后保存就行了
    base64保存为图片看这个:https://blog.csdn.net/hfhwfw/article/details/5544408

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • lyushilei 2018-06-06 01:04
    关注

    可以使用post的方式

    评论
  • EveChee 2018-06-06 02:45
    关注

    直接将canvas转化base64 然后通过ajax请求发给后台 后台会处理的

    评论
  • ZHAOCHUANsuxiaoyu 2018-06-06 02:57
    关注

    直接将canvas转化base64 然后通过ajax请求发给后台 后台会处理的

    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥20 寻找dspace有偿技术支持
  • ¥30 深度学习的模型融合问题
  • ¥20 数电实验Verilog编程
  • ¥15 机器人MATLAB仿真示教占内存过大
  • ¥15 JSR233已经使用但是仍无法将csv数据放到一个list里显示出来,如何解决?
  • ¥15 I350 Gigabit Network
  • ¥15 关于#abap#的问题,请各位专家解答!
  • ¥20 内网通过公网访问外网问题
  • ¥20 谁有这个东西 继续教育的
  • ¥15 怎么使请求通过cors