我想知道,如何拍摄使用笔记本电脑网络摄像头拍摄的图像,存储在画布中并将其上传到我的数据库?我把代码留给你。我输入了一个输入,method="post"
action="datbase.php"
因为我正在用 php 尝试数据库。
提前致谢。
function activateCamera() {
var video = document.querySelector("#camaraOn");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMEdia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
alert("La camara No esta funcionando Permita el acceso")
}
}
//Funcion para capturar el streaming
function tomarFoto() {
var video = document.querySelector("#camaraOn");
canvas=document.getElementById("fotoTomada");
let {left,top}= video.getBoundingClientRect();
canvas.width=1080;
canvas.height=650;
canvas.getContext("2d").drawImage(video,0,0,1080,650);
canvas.style.left=`${left}px`;
canvas.style.top=`${top}px`;
canvas.style.position="absolute";
canvas.toDataURL("image/png");
fotAux=canvas.toDataURL("image/png");
input= document.getElementById("urlImg");
input.value=fotAux;
canvas.style.visibility="visible";
btnGuard= document.getElementById("btnGuard");
btnGuard.style.visibility="visible";
btnFotoTomada= document.getElementById("btnTake");
btnFotoTomada.style.visibility="hidden";
btnFotoTomada.disabled=true;
}
<!DOCTYPE html>
<html>
<head>
<title> SnapDCU </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/kickstart.js"></script> <!-- KICKSTART -->
<link rel="stylesheet" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->
<script src="js/script.js"> </script>
</head>
<header>
<nav class="navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">SnapWebDCU</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Inicio</a></li>
<li> <a href="klk.php">Fotos</a></li>
</ul>
</div>
</nav>
</header>
<body onload="activateCamera()">
<style>
.canvasCamara{
position: relative;
}
.canvasCamara>.botonesAccion{
background: url('css/img/shotpng.png') bottom center no-repeat;
height: 145px;
left: 50%;
margin: -64px 0 0 -64px;
position: absolute;
top: 85%;
border: 15px solid transparent;
width: 145px;
z-index: 1;
}
.canvasCamara>.btnGuard{
visibility: hidden;
background: url('css/img/derecha.png') bottom right no-repeat;
height: 145px;
left: 50%;
margin: -64px 0 0 -64px;
position: absolute;
top: 85%;
border: 15px solid transparent;
width: 145px;
z-index: 1;
}
</style>
<div class="container">
<div class="canvasCamara">
<video autoplay="true" width="1080" id="camaraOn" height="650"> </video>
<button class="botonesAccion" onclick="tomarFoto()" type="button" id="btnTake" name="btnTake"></button>
</div>
<div class="divCanv">
<canvas id="fotoTomada" height="1" width="1" ></canvas>
<form class="btnGuard" method="post" action="database.php">
<input type="text" id="urlImg" name="urlImg"/>
<button id="btnGuard" type="submit" name="btnGuard"></button>
</form>
</div>
</div>
</body>
</html>
当你拍照时,你用画布来做,在方法中
Context#drawImage
绘制. 在您调用 的那一刻绘制完框架后,画布就可用于获取 URL。video
MediaStream
drawImage
该方法
Canvas#toDataURL
返回一个URL数据;这种类型的 URL 用于“伪装” URL 中的小文件;如果您传递与图像对应的 mime,此方法将返回base64格式的图像在 MySQL 数据库中保存这样的图像可以通过不同的方式完成,每种方式都对应于表在数据库中的定义方式。
专栏
Text
/Varchar
如果该列被定义为
Text
或Varchar
或任何其他允许您插入文本的列,您可以直接以 base64 格式存储图像。柱子
Blob
如果列是
Blob
或派生为LongBlob
,您首先需要将 base64 图像转换为二进制对象。您可以在客户端和服务器上执行此操作。将 base64 转换为文件
要将 base64 编码的图像转换为
File
,您首先需要从中创建一个对象Blob
。但是,File
IE11 或 Edge 不支持构造函数。您可以通过使用
Uint8Array
. 此数据类型存储8 位无符号整数。上面的函数只是循环遍历 base64 字节的字符串,并为每个字母获取其 Unicode 表示,然后将其添加到数组中。最后,它传递数组以
Blob
指示其各自的 mime 类型。此时,您所要做的就是
Blob
使用 AJAX发送FormData
:在 PHP 中,您将图像写入临时目录,然后读取它并将其插入数据库。