캔버스를 사용하여 웹캠 ( "navigator.mediaDevices.getUserMedia"사용)과 HTML 5 태그 "video"로 캡처 한 이미지 중앙 위에 직사각형 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 태그 비디오로 인쇄 된 이미지 위에 직사각형을 어떻게 그릴 수 있습니까?
내 코드는 다음과 같습니다.
camera.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>
script.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();
style.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;
}
내가 찾은 가장 좋은 방법은 캔버스에 비디오를 그리고 그 후에 직사각형을 그리는 것입니다.
1 단계 : 태그 비디오 숨기기.
<video autoplay="true" id="webCamera" style="display: none"> </video>
2 단계 : 내 div에 태그 캔버스 삽입
<canvas id="videoCanvas"></canvas>
3 단계 : 캔버스에 비디오와 사각형을 그리는 함수를 자바 스크립트에 만듭니다.
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);
}
4 단계 : 비디오를 재생할 때 내 함수를 실행합니다.
var video = document.querySelector("#webCamera");
video.onplay = function() {
setTimeout(drawImge , 300);
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다