bueno he estado en un proyecto y me he quedado trancado con algo, necesito
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.';
?>
agrega_transportista.php
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();
}
?>
pero las imagens cuando voy a ver me salen vacias, alguien podria ayudarme?? o sabria pq ocurre este error??