que el sistema agregue a una persona y poder tomarle la foto y guardar esa imagen,
lo he hecho con html pero a veces funciona y otras no, tengo un formulario normal
para los datos y para tomar la foto es el problema
tengo esto por un lado
crear_transportista.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <meta name="author" content="cblanco" /> <link rel="stylesheet" href="../../components/jquery-ui-1.10.3/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="../../components/jquery-ui.js"></script> <script src="../../components/jquery.maskedinput.js" type="text/javascript"></script> <script> $(document).ready(function() { $("#foto").hide(); $("#form1").submit(function() { var dep = $("#em_t").val(); var login = $("#nombre").val(); var ape = $("#apellido").val(); var ced = $("#cedula").val(); if(dep == 0 || login ==""|| ape ==""|| ced ==""){ alert("Verifique que los campos no se encuentren vacios."); return false; } }); $("#snap").click(function (){ var ced = $("#cedula").val(); if(ced != "") { $("#foto").show(); $("#Tomar_foto").hide(); var canvas = document.getElementById('canvas'); var dataURL = canvas.toDataURL("image/png"); $.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL, cedula: ced } }).done(function(o) { console.log('saved'); }); }else{ alert("Antes de tomar la foto debe haber rellenado los campos: Nombre, Apellido y Cedula."); } }); }); </script> </head> <body> <?php include ('../../components/p_con.php'); $adempiere_con = conexion_adempiere(); $str = "SELECT m_shipper_id, ad_client_id, ad_org_id, isactive, created, createdby, updated, updatedby, name, description, c_bpartner_id, trackingurl FROM m_shipper;"; if($adempiere_con != FALSE){ $query = pg_query($adempiere_con, $str); }else{ echo "Error: ".pg_last_error(); } ?> <div > <h3>Agregar Transportistas</h3> <form id="form1" name="form1" method="post" action="agregar_chofer.php"> <table border="1"> <tr bgcolor="#FFFFFF"> <td>Nombre</td> <td><label for="nombre"></label> <input type="text" name="nombre" id="nombre" /></td> </tr> <tr bgcolor="#FFFFFF"> <td>Apellido</td> <td><label for="apellido"></label> <input type="text" name="apellido" id="apellido" /></td> </tr> <tr bgcolor="#FFFFFF" > <td>Cedula</td> <td><label for="cedula"></label> <input type="text" name="cedula" id="cedula" placeholder="20000000"/></td> </tr> <tr bgcolor="#FFFFFF" > <td>Empresa de Transporte:</td> <td><label for="empresa de transporte"></label> <select name="em_t" id="em_t"> <option value="0">Seleccione la empresa de transporte...</option> <?php while($arry_et = pg_fetch_array($query)){?> <option value="<?php echo $arry_et['name']; ?>"><?php echo $arry_et['name']; ?></option> <?php } ?> </select> </td> </tr> <tr bgcolor="#FFFFFF" > <td colspan="2"> <input type="submit" name="bottom" id="bottom" value="GUARDAR" /> </label></td> </tr> </table> </form> <div> <div id="Tomar_foto"> <video id="video" autoplay="autoplay" height="200" width="200"></video> <button id="snap" class="sexyButton">TOMAR FOTO</button> </div> <div id="foto"> <canvas id="canvas" width="200" height="200"></canvas> </div> </div> <script> // Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // WebKit-prefixed navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } // Trigger photo take document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 200, 200); }); }, false); </script> </div> </body> </html>
script.php
Código PHP:
<?php
define('UPLOAD_DIR', 'fotos/');
$img = $_POST['imgBase64'];
$ced = $_POST['cedula'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR.$ced.'.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
Código PHP:
<?php
include ('../../components/p_con.php');
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$ced = $_POST['cedula'];
$emt = $_POST['em_t'];
$str_query = "INSERT INTO web.transportistas (t_nombre, t_apellido, t_ced,emt)
VALUES('$nombre','$apellido','$ced','$emt')";
if(pg_query($link, $str_query))
{
echo "<script type='text/javascript'>
window.location = 'crear_transportistas.php'
</script>";
}else{
echo "Error:".pg_last_error();
}
?>