我需要从网络摄像头捕获图像并转换为 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() 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字符串。我创建了小提琴示例。
您可以使用 canvas.toDataURL() 方法并编辑
capturefunction 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>无需使用临时画布。只需将数据 blob 提供给
FileReader 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");
});