I want to know, how can I take an image taken with laptop webcam, stored in canvas and upload it to my database? I leave you the code. I put an input with method="post"
action="datbase.php"
because I was trying the database thing with php.
Thanks in advance.
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>
When you take a photo you do it with canvas, painting in the method
Context#drawImage
the elementvideo
where theMediaStream
. Once the frame has been painted the instant you calldrawImage
, the canvas is available to fetch a URL.The method
Canvas#toDataURL
returns a URL data; this type of URLs serve to "camouflage" small files in a URL; in case you pass a mime corresponding to an image, this method will return the image in base64 formatSaving such an image in a MySQL database can be done in different ways, each of which corresponds to how the table is defined in the database.
Column
Text
/Varchar
In case the column is defined as
Text
orVarchar
or any other column that allows you to insert text, you can directly store the image in base64 format.Column
Blob
In case the column is
Blob
or derived asLongBlob
, you first need to convert the base64 image to a binary object. You can do this both on the client and on the server.Convert base64 to File
To convert a base64-encoded image to
File
, you first need to create an objectBlob
from it. However, the constructorFile
is not supported in IE11 or Edge .You can achieve the same end by converting the base64 to a blob using a
Uint8Array
. This data type stores 8-bit unsigned integers .The above function just loops through the string in base64 bytes and gets for each letter its Unicode representation , then adds it to the array. Finally, it passes the array to
Blob
indicating its respective mime type.At this point, all you have to do is send the
Blob
by AJAX using aFormData
:In PHP, you write the image to a temporary directory, then read it and insert it into the database.