Jit*_*nny 4 javascript base64 image getusermedia
我需要从网络摄像头捕获图像并转换为 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>
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 字符串。我创建了小提琴示例。