te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>Capture image from webcam and convert to base64 in javascript - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>Capture image from webcam and convert to base64 in javascript - Stack Overflow

    Capture image from webcam and convert to base64 in javascript - Stack Overflow

    programmeradmin4浏览0评论

    I need to capture an image from a web camera and convert to base64. Should be able to capture multiple frames and concatenate them and again convert to base 64. This code works well for capturing but converting it to base64 seems to be an issue. 

    <html>
<body>
<center> 
<body>
<div id="container">
<video width="200" height="200" autoplay="true" id="video">
</video>
</div>
<button onclick="capture()">Capture</button>  <br> </br>
<canvas id="canvas" style="overflow:auto"></canvas>
<br></br>
<p> Image Converted to String: </p>
<p id="printresult"></p>
</center>
<script>
var video = document.querySelector("#video");
if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}

function capture() {
var canvas = document.getElementById('canvas');     
var video = document.getElementById('video');
canvas.width = 200;
canvas.height = 200;
canvas.getContext('2d').drawImage(video, 0, 0, 200,200);  
canvas.toBlob() = (blob) => {
      const img = new Image();
      img.src = window.URL.createObjectUrl(blob);
    };

}
document.getElementById("printresult").innerHTML = resultb64;
</script>
</body>
</html>

    I need to capture an image from a web camera and convert to base64. Should be able to capture multiple frames and concatenate them and again convert to base 64. This code works well for capturing but converting it to base64 seems to be an issue. 

    <html>
<body>
<center> 
<body>
<div id="container">
<video width="200" height="200" autoplay="true" id="video">
</video>
</div>
<button onclick="capture()">Capture</button>  <br> </br>
<canvas id="canvas" style="overflow:auto"></canvas>
<br></br>
<p> Image Converted to String: </p>
<p id="printresult"></p>
</center>
<script>
var video = document.querySelector("#video");
if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}

function capture() {
var canvas = document.getElementById('canvas');     
var video = document.getElementById('video');
canvas.width = 200;
canvas.height = 200;
canvas.getContext('2d').drawImage(video, 0, 0, 200,200);  
canvas.toBlob() = (blob) => {
      const img = new Image();
      img.src = window.URL.createObjectUrl(blob);
    };

}
document.getElementById("printresult").innerHTML = resultb64;
</script>
</body>
</html>
    • javascript
    • image
    • base64
    • getusermedia
    Share Improve this question edited Apr 11, 2020 at 9:15 Tân 1 asked Apr 11, 2020 at 9:02 Jithin SunnyJithin Sunny 511 silver badge2 bronze badges 1
    • look at this link – Jack Commented Apr 11, 2020 at 9:05
    Add a ment  | 

    3 Answers 3

    Reset to default 11

    https://jsfiddle/qfaeb3tL/1/

    canvas.toDataURL() gives u base64 string

     var video = document.querySelector("#video");
 if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
 }
 var resultb64="";
 function capture() {        
    var canvas = document.getElementById('canvas');     
    var video = document.getElementById('video');
    canvas.width = 200;
    canvas.height = 200;
    canvas.getContext('2d').drawImage(video, 0, 0, 200,200);  
    document.getElementById("printresult").innerHTML = canvas.toDataURL(); 
 }
  document.getElementById("printresult").innerHTML = resultb64;

    gives you base64 string. I created fiddle example.

    You can use canvas.toDataURL() method and edit capture function to:

    function capture() {
  var canvas = document.getElementById('canvas');     
  var video = document.getElementById('video');

  canvas.width = 200;
  canvas.height = 200;
  canvas.getContext('2d').drawImage(video, 0, 0, 200,200);  

  document.getElementById("printresult").innerHTML = canvas.toDataURL();
}


    var video = document.querySelector("#video");

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (stream) {
      video.srcObject = stream;
    })
    .catch(function (err0r) {
      console.log("Something went wrong!");
    });
}

function capture() {
  var canvas = document.getElementById('canvas');     
  var video = document.getElementById('video');
  
  canvas.width = 200;
  canvas.height = 200;
  canvas.getContext('2d').drawImage(video, 0, 0, 200,200);  
  
  document.getElementById("printresult").innerHTML = canvas.toDataURL();
}
    <div id="container">
<video width="200" height="200" autoplay="true" id="video">
</video>
</div>
<button onclick="capture()">Capture</button>  <br> <br/>
<canvas id="canvas" style="overflow:auto"></canvas>
<br><br/>
<p> Image Converted to String: </p>
<p id="printresult"></p>

    No need to use a temp canvas. Just feed the data blob to a FileReader and get back the dataUrl you need

        const track = stream.getVideoTracks()[0];
    const imageCapture = new ImageCapture(track);

    imageCapture.takePhoto().then((blob) => {
        var reader = new FileReader();
        reader.onload = function () {
            var image = reader.result; // here's the dataUrl
        };
        reader.readAsDataURL(blob);
    }).catch((error) => {
        console.log("error");
    });

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论