我尝试使用 Canvas 在网络摄像头(使用“navigator.mediaDevices.getUserMedia”)和 HTML 5 标签“视频”捕获的图像的中心绘制一个 100 x 100 的矩形。
要捕获我使用的网络摄像头图像:
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
.then( function(stream) {
//Definir o elemento víde a carregar o capturado pela webcam
video.srcObject = stream;
return stream;
})
.catch(function(error) {
alert("Error on open device");
});
}
并在线显示此图像，我只需使用:
<video autoplay="true" id="webCamera">
</video>
如何在 HTML 5 标签视频打印的图像上绘制一个矩形？
我的代码是:
相机.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!--Título-->
<title>Camera Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Apenas um teste"/>
<!--OpenType-->
<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<!--CSS-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="area">
<video autoplay="true" id="webCamera">
</video>
<form target="POST">
<textarea type="text" id="base_img" name="base_img"></textarea>
<button type="button" onclick="takeSnapShot()">Snapshot</button>
</form>
<img id="imagemConvertida"/>
<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank"></a></p>
<!--Scripts-->
<script src="script.js"></script>
</div>
</body>
</html>
脚本.js
function loadCamera(){
//Captura elemento de vídeo
var video = document.querySelector("#webCamera");
//As opções abaixo são necessárias para o funcionamento correto no iOS
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
//--
//Verifica se o navegador pode capturar mídia
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
.then( function(stream) {
//Definir o elemento víde a carregar o capturado pela webcam
video.srcObject = stream;
return stream;
})
.catch(function(error) {
alert("Error on open device");
});
}
}
function takeSnapShot(){
//Captura elemento de vídeo
var video = document.querySelector("#webCamera");
//Criando um canvas que vai guardar a imagem temporariamente
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
//Desnehando e convertendo as minensões
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
//Criando o JPG
var dataURI = canvas.toDataURL('image/jpeg'); //O resultado é um BASE64 de uma imagem.
document.querySelector("#base_img").value = dataURI;
sendSnapShot(dataURI); //Gerar Imagem e Salvar Caminho no Banco
}
function sendSnapShot(base64){
var request = new XMLHttpRequest();
request.open('POST', 'save_photos.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function() {
console.log(request);
if (request.status >= 200 && request.status < 400) {
//Colocar o caminho da imagem no SRC
var data = JSON.parse(request.responseText);
//verificar se houve erro
if(data.error){
alert(data.error);
return false;
}
//Mostrar informações
document.querySelector("#imagemConvertida").setAttribute("src", data.img);
document.querySelector("#caminhoImagem a").setAttribute("href", data.img);
document.querySelector("#caminhoImagem a").innerHTML = data.img.split("/")[1];
} else {
alert( "Error on save. Status:" + request.status );
}
};
request.onerror = function() {
alert("Error on save. Back-End fail.");
}
request.send("base_img="+base64); // Enviar dados
}
loadCamera();
样式.css
body{
font-family: sans-serif;
margin: 0;
}
.area{
margin: 10px auto;
box-shadow: 0 10px 100px #ccc;
padding: 20px;
box-sizing: border-box;
max-width: 500px;
}
.area video{
width: 100%;
height: auto;
background-color: whitesmoke;
}
.area textarea{
width: 100%;
margin-top: 10px;
height: 80px;
box-sizing: border-box;
}
.area button{
-webkit-appearance: none;
width: 100%;
box-sizing: border-box;
padding: 10px;
text-align: center;
background-color: #068c84;
color: white;
text-transform: uppercase;
border: 1px solid white;
box-shadow: 0 1px 5px #666;
}
.area button:focus{
outline: none;
background-color: #0989b0;
}
.area img{
max-width: 100%;
height: auto;
}
.area .caminho-imagem{
padding: 5px 10px;
border-radius: 3px;
background-color: #068c84;
text-align: center;
}
.area .caminho-imagem a{
color: white;
text-decoration: none;
}
.area .caminho-imagem a:hover{
color: yellow;
}
最佳答案
我发现最好的方法是在 Canvas 上绘制视频，然后绘制矩形。
第一步:隐藏标签视频。
<video autoplay="true" id="webCamera" style="display: none"> </video>
第二步:在我的 div 上插入标签 Canvas 。
<canvas id="videoCanvas"></canvas>
第三步:在我的 javascript 上创建一个在 Canvas 上绘制视频和矩形的函数。
function drawImge(){
var video = document.querySelector("#webCamera");
var canvas = document.querySelector("#videoCanvas");
var ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var faceArea = 300;
var pX=canvas.width/2 - faceArea/2;
var pY=canvas.height/2 - faceArea/2;
ctx.rect(pX,pY,faceArea,faceArea);
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.stroke();
setTimeout(drawImge , 100);
}
第四步:播放视频时触发我的功能。
var video = document.querySelector("#webCamera");
video.onplay = function() {
setTimeout(drawImge , 300);
};
关于javascript - 在 HTML 5 标签视频上绘制矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59702127/