Захват изображения с веб-камеры и конвертирование в base64 в javascript - PullRequest
Новая
       66

Захват изображения с веб-камеры и конвертирование в base64 в javascript

3 голосов
/ 11 апреля 2020

Мне нужно захватить изображение с веб-камеры и конвертировать в base64. Должен быть в состоянии захватить несколько кадров и объединить их и снова преобразовать в base 64. Этот код хорошо работает для захвата, но преобразование его в base64 кажется проблемой. 

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

Ответы [ 2 ]

1 голос
/ 11 апреля 2020

Вы можете использовать canvas.toDataURL () метод и редактировать capture функцию для: 

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>
1 голос
/ 11 апреля 2020

https://jsfiddle.net/qfaeb3tL/1/

canvas.toDataURL() дает вам строку base64 

 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;

дает вам строку base64. Я создал пример скрипки.

...