从网络摄像头捕获图像并在 javascript 中转换为 base64答案

【问题标题】：Capture image from webcam and convert to base64 in javascript从网络摄像头捕获图像并在 javascript 中转换为 base64
【发布时间】：2020-07-24 00:46:48
【问题描述】：

我需要从网络摄像头捕获图像并转换为 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>

【问题讨论】：

看看这个link

标签： javascript image base64 getusermedia

【解决方案1】：

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 字符串。我创建了小提琴示例。

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：