I want to take a photo with the webcam and save it to a postgresql database. So far, I have the page to activate the camera and take photo and pre-view mounted and the upload script done, but the image recorded in the bank is 0 Kb.
Below the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://sitamet.com.br/bibliotecas/_webcam/webcam.min.js"></script>
<script>
Webcam.set({
width: 320,
height: 240,
dest_width: 320,
dest_height: 240,
crop_width: 240,
crop_height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
function setup() {
Webcam.reset();
Webcam.attach( '#my_camera' );
}
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML = '<img id="imgfoto" name="imgfoto" src="'+data_uri+'"/>';
document.getElementById('resultsb').innerHTML = '<button onclick="salvar_foto();" style="padding:3px; border-radius:4px; border:grey solid 1px; cursor:pointer;" formaction="foto.php">Gravar foto</button>';
} );
}
function salvar_foto()
{
var file = document.getElementById("base64image").src;
var formdata = new FormData();
formdata.append("base64image", file);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) { upload_completo(event);}, false);
ajax.open("POST", "foto.php");
ajax.send(formdata);
}
</script>
<form method="post" enctype="multipart/form-data">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="15%" width="50%" align="center" valign="middle" style="color:black; font-size:14px;">Câmera</td>
<td height="15%" width="50%" align="center" valign="middle" style="color:black; font-size:14px;">Previsualização</td>
</tr>
<tr>
<td height="70%" width="50%" align="center" valign="middle" style="padding:5px;">
<div id="my_camera"></div>
</td>
<td height="70%" width="50%" align="center" valign="middle" style="padding:5px;">
<div id="results">Foto aqui...</div>
</td>
</tr>
<tr>
<td height="15%" width="50%" align="center" valign="middle">
<input type="button" value="Ativar Camera" onClick="setup(); $(this).hide().next().show();" style="padding:3px; border-radius:4px; border:grey solid 1px; cursor:pointer;">
<input type="button" value="Tirar Fotografia" onClick="take_snapshot()" style="display:none; padding:3px; border-radius:4px; border:grey solid 1px; cursor:pointer;">
</td>
<td height="15%" width="50%" align="center" valign="middle">
<div id="resultsb"></div>
</td>
</tr>
</tbody>
</table>
</form>The upload page for the bank:
@session_start();
include("banco.php");
$idcliente = $_SESSION['cliId'];
define('UPLOAD_DIR', '_tmp/');
$img = $_POST['imgfoto'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . $idcliente . '.jpeg';
$success = file_put_contents($file, $data);
//print $success ? $file : 'Não é possível salvar o arquivo.';
$filen = substr($file,6,100);
pg_query($dbconn, "begin");
$oid = pg_lo_import($dbconn, '_tmp/'.$filen);
$sql = "update clientes set fotoimagem = '$oid', fotoimagemext = '.jpeg', idatualizacao = ".$_SESSION['usuario_id'].", dtatualizacao = now() where id = $idcliente";
$res = pg_query($dbconn,$sql);
pg_query($dbconn, "commit");
unlink('_tmp/'.$filen);